ReactJS Axios Nginx CORS 问题答案

【问题标题】：ReactJS Axios Nginx CORS issueReactJS Axios Nginx CORS 问题
【发布时间】：2020-09-15 08:52:53
【问题描述】：

我正在使用React 15.6.1, Axios, NGINX。我在登录时遇到 CORS 问题。下面是登录 axios POST 调用

const additionalHeaders = {
  code: action.payload,
  page: 'login'
};
const loginData = yield call(() =>
  axios(authorization, 'Basic', additionalHeaders).post(
    URL + ACCESS_TOKEN_URL,
    params
  )
);

下面是错误控制台

Access to XMLHttpRequest at '..../oauth/token' from origin 'http://localhost:3000' 
has been blocked by CORS policy: Request header field sourcepage is not allowed by 
Access-Control-Allow-Headers in preflight response.
utils.js:258 uncaught at tryLogin 
 at takeLatestHelper 
 at login 
 TypeError: Cannot read property 'data' of undefined
    at login$ (webpack-internal:///./app/containers/Login/saga.js:137:43)
    at tryCatch (webpack:///./node_modules/regenerator-runtime/runtime.js?:65:40)
    at Generator.invoke [as _invoke] (webpack:///./node_modules/regenerator-runtime/runtime.js?:303:22)
    at Generator.prototype.<computed> [as throw] (webpack:///./node_modules/regenerator-runtime/runtime.js?:117:21)
    at next (webpack:///./node_modules/redux-saga/es/internal/proc.js?:289:32)
    at currCb (webpack:///./node_modules/redux-saga/es/internal/proc.js?:387:7)
    at eval (webpack:///./node_modules/redux-saga/es/internal/proc.js?:443:14)
..
..
xhr.js:160 POST .../aas/oauth/token net::ERR_FAILED

以下是我尝试过的，但不起作用。

我有 NGINX 配置。我为Access-Control-Allow-Origin 添加了add_header 参数

 # Always serve index.html for any request
location / {
  add_header 'Access-Control-Allow-Origin' "*";
  add_header 'Access-Control-Allow-Credentials' 'true';
  add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, PATCH, DELETE, OPTIONS';
  add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With';
  # Set path
  root /var/www/;
  try_files $uri /index.html;

}

我们有 3 个 nodejs 中间件文件 frontendMiddleWare.js、devMiddleware.js、prodMiddleWare.js 我在 fontendMiddleware 中添加了以下访问权限

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
  next();
});

我在客户端找不到更多解决方案，仍然无法解决问题。

编辑：此问题已第二次出现。第一次我能够看到 200 响应的令牌并且正在工作。当我尝试登录时加载应用程序时，它将尝试再次获取令牌。此时出现了 CORS 问题。

【问题讨论】：

cors 设置必须来自后端，并且来自后端才能访问 url 和端口，例如 locahost:3000 或其他东西。
@Matarishvan 你觉得我的回答有用吗？
@VinodSai 这些更改在我的情况下不起作用。因为我不知道后端的 CORS 设置。
@Matarishvan 如果您尝试我的回答，则无需担心 cors。我在我的项目中使用它。它工作正常
@VinodSai 我已经用过了。我在 package.json 中添加了"proxy": "http://localhost:8000",。但它不起作用

标签： javascript reactjs nginx axios cors

【解决方案1】：

您可以使用fruitcake/laravel-cors 包进行异常并修复api路由。

【讨论】：

【解决方案2】：

我们可以在 package.json 文件中创建一个代理，如果前端的路由不可用，它会调用后端服务器。我们可以在 package.json 中添加一个名为 proxy 的键，并将后端 api 作为值

proxy: http://localhost:PORT_NUMBER_OF_BACKEND

记得停止反应服务器并重新启动它才能工作

来源https://create-react-app.dev/docs/proxying-api-requests-in-development/

在这种情况下我们不会出现cors错误，并且在生产中我们可以生成构建并将其放置在网站后端的公共文件夹中，因此生产中不会出现任何cors问题。

【讨论】：

【解决方案3】：

你可以在你的应用程序上添加 cors 包，首先你应该安装 cors 包npm install cors --save 然后做这样的事情：

const cors = require('cors');
app.use(cors());

删除您放在 Nginx conf 和中间件文件中的所有其他额外标头。

希望它会起作用

【讨论】：

试过了。不工作。不确定是否必须从后端进行 cors 设置