时间戳

首页 > 解决方案 > React + Express：预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 access-control-allow-origin

javascript - React + Express：预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 access-control-allow-origin

问题描述

我正在运行一个节点/express 服务器，它当前是我的后端并托管 API。我可以通过邮递员访问端口 123 上的 API。我正在 React 中创建我的前端并尝试访问 API 以获取一些数据。但是，当我尝试导航到该页面时，我在控制台中收到以下错误。

Access to XMLHttpRequest at 'http://abc:123/test' from origin 'http://abc:456' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.
createError.js:17 Uncaught (in promise) Error: Network Error
    at createError (createError.js:17)
    at XMLHttpRequest.handleError (xhr.js:80)

我已将以下内容添加到我的服务器但仍然收到错误，关于我可能遗漏的任何建议？

app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Credentials", "true");
    res.header("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE, OPTIONS");
    res.header("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Access-Control-Request-Headers, Authorization");
    next();
})

在我的 React 代码中，我使用 axios 向 API 发出 post 请求

axios.post("http://abc:123/test", {
        'data': '12346'
    }).then(response => {
        console.log(response);
    })

标签： javascriptreactjsexpresscors

解决方案

飞行前请求是一个 OPTIONS 请求，您只回答 POST 请求。添加

  app.post(/*...*/);

  app.options("http://abc:123/test", (req, res) =>
    res.status(200).send("Feel free to send the real request now :)")
  );

或者添加类似 npm cors 包的东西，它也可以为你做。

推荐阅读