Как преодолеть проблему CORS в ReactJS

Я пытаюсь сделать вызов API через Axios в моем приложении React.Тем не менее, я получаю эту проблему CORS в своем браузере. Мне интересно, могу ли я решить эту проблему с клиентской стороны, поскольку у меня нет никакого доступа к API внутри.Прилагается мой код.

const response = axios({
   method: 'post',
   dataType: 'jsonp',
   url: 'https://awww.api.com',
   data: {
    'appToken':'',
    'request':{ 
        'applicationName':'ddfdf', 
        'userName':'jaime@dfd.com', 
        'password':'dfd', 
        'seasonIds':[1521ddfdfd5da02] 
     }
     }
    });
   return{
    type:SHARE_REVIEW,
    payload:'response'
 }
 }

прилагается мой WebPack.конфиг.js

module.exports = {

entry: [
'./src/index.js'
 ],
output: {
  path: __dirname,
  publicPath: '/',
  filename: 'bundle.js'
},
module: {
 loaders: [{
  exclude: /node_modules/,
  loader: 'babel',
  query: {
    presets: ['react', 'es2015', 'stage-1']
  }
 },
 { test: /.json$/, loader: "json-loader"}]
  },
 resolve: {
  extensions: ['', '.js', '.jsx']
 },
devServer: {
historyApiFallback: true,
contentBase: './'
},
node: {
 dns: 'mock',
 net: 'mock'
 },
 };
6
axios cors javascript reactjs redux

4 ответов

идеальным способом было бы добавить поддержку CORS на ваш сервер.

вы также можете попробовать использовать отдельную JSONP в модуль. Насколько я знаю, axios не поддерживает jsonp. Поэтому я не уверен, что метод, который вы используете, будет квалифицироваться как действительный запрос jsonp.

существует еще одна хакерская работа вокруг проблемы CORS. Вам придется развернуть свой код с сервером nginx, служащим прокси-сервером как для вашего сервера, так и для вашего клиента. То, что будет сделайте трюк нам

5

временное решение этой проблемы с помощью плагина chrome под названием CORS. Btw backend server должен отправлять правильный заголовок на запросы переднего плана.

6

другой способ, кроме @Nahushответ, если вы уже используете Express framework в проекте вы можете избежать использования Nginx для обратного прокси-сервера.

более простой способ-использовать express-http-proxy

  1. run npm run build создать пакет.

    var proxy = require('express-http-proxy');

var app = require('express')();

//define the path of build

var staticFilesPath = path.resolve(__dirname, '..', 'build');

app.use(express.static(staticFilesPath));

app.use('/api/api-server', proxy('www.api-server.com'));

используйте "/ api / you-server " из кода react для вызова API.

Итак, этот браузер отправит запрос к тому же хосту, который будет внутренне перенаправляя запрос на другой сервер, браузер будет чувствовать, что он исходит из того же источника;)

2

вы можете настроить прокси-сервер express с помощью http-proxy-middleware чтобы обойти CORS:

const express = require('express');
const proxy = require('http-proxy-middleware');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();

app.use(express.static(__dirname));
app.use('/proxy', proxy({
    pathRewrite: {
       '^/proxy/': '/'
    },
    target: 'https://server.com',
    secure: false
}));

app.get('*', (req, res) => {
   res.sendFile(path.resolve(__dirname, 'index.html'));
});

app.listen(port);
console.log('Server started');

из вашего приложения react все запросы должны быть отправлены в /proxy конечная точка, и они будут перенаправлены к нужному серверу.

const URL = `/proxy/${PATH}`;
return axios.get(URL);
0