ReactJS Ax ios Nginx Проблема CORS - PullRequest
Новая
       88

ReactJS Ax ios Nginx Проблема CORS

0 голосов
/ 28 мая 2020

Я использую React 15.6.1, Axios, NGINX. У меня проблема с CORS при входе в систему. Ниже показан логин ax ios POST call 

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. Я добавил параметры add_header для Access-Control-Allow-Origin

 # 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 файлы middleWare 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();
});

Я не смог найти больше solns на стороне клиента и все еще не могу решить проблему.

РЕДАКТИРОВАТЬ: Эта проблема появляется во второй раз. В первый раз я могу увидеть токен с ответом 200 и работать. Когда приложение загружается, когда я пытаюсь войти в систему, оно снова попытается получить токен. на этом этапе обнаруживается проблема CORS.

Ответы [ 3 ]

0 голосов
/ 28 мая 2020

Мы можем создать прокси-сервер в файле package. json, который вызывает внутренний сервер, если маршрут недоступен во внешнем интерфейсе. Мы можем добавить ключ в package. json именованный прокси и дать бэкэнд api как значение 

proxy: http://localhost:PORT_NUMBER_OF_BACKEND

Не забудьте остановить реагирующий сервер и запустить его снова, чтобы это работало

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

В этом случае мы не получим ошибку cors, и в процессе производства мы можем сгенерировать сборку и поместить ее в папку publi c серверной части веб-сайта. , так что проблем с корсами в производстве не будет.

0 голосов
/ 28 мая 2020

Вы можете добавить пакет cors в свое приложение, сначала вы должны установить пакет cors npm install cors --save, после этого сделайте что-то вроде этого: 

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

Удалите все остальные дополнительные заголовки, которые вы добавили Nginx conf и ваш файл промежуточного программного обеспечения.

Надеюсь, сработает

0 голосов
/ 28 мая 2020

Вы можете использовать пакет fruitcake / laravel -cors , чтобы сделать исключение и исправить маршрут api.

...