Question

我目前的前端和后端是分开的。当我在localhost:3000启动我的React应用程序以localhost:8000/search/results?search_query=点击我的Express应用程序时，我被CORS阻止了。所以我在Express后端的app.js文件中设置了这个：

app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
});

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));

app.use('/', index);
app.use('/search', search);
app.use('/results', result);

app.listen(8000, () => {
    console.log('App listening on port 8000...')
})

我在React中使用此函数从我的前端调用我的后端路径：

 bingSearch(term) {
    fetch('http://localhost:8000/search/results?search_query=' + term)
    .then((response) => {
      response.json()
      .then((json) => {
        this.setState({results: json})
      })
    })
  }

之后我没有收到CORS错误。但是，我正在尝试的路由是使用Bing Web Search API的路由，该API具有我通过该GET请求的标头传递的订阅密钥。然而，我的应用程序现在就挂起了。

我应该如何以及在哪里允许我的前端连接到我的后端的CORS，但不会破坏我的Bing API GET请求？

Answer 1

您需要在中间件中调用next（）。

app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

您可以在此处详细了解：https://expressjs.com/en/guide/writing-middleware.html

允许来自React前端的CORS不允许Express后端使用Bing API

1 个答案: