Cómo superar el problema de CORS en ReactJS

Estoy tratando de hacer una llamada a la API a través de Axios en mi React Application.However, Iam conseguir este problema CORS en mi navegador. Me pregunto si puedo resolver este problema desde el lado del cliente ya que no tengo ningún acceso a la API internamente.

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'
 }
 }

Adjunto es mi WebPack.config.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'
 },
 };
Programación
javascript reactjs redux cors axios
18º abril 2017 в 2:01
No hay vistas aún
Solución

Lo ideal sería añadir soporte CORS a su servidor.

También podrías intentar usar un módulo jsonp separado. Que yo sepa axios no soporta jsonp. Así que no estoy seguro de si el método que está utilizando calificaría como una solicitud jsonp válida.

Hay otro truco para solucionar el problema de CORS. Tendrás que desplegar tu código con un servidor nginx sirviendo como proxy tanto para tu servidor como para tu cliente. Lo que hará el truco es la directiva proxy_pass. Configure su servidor nginx de tal manera que el bloque de ubicación que gestiona su solicitud particular proxy_pass o redirigir su solicitud a su servidor real. Los problemas CORS suelen producirse por cambios en el dominio del sitio web. Cuando usted tiene un proxy que sirve como la cara de su cliente y su servidor, el navegador es engañado para que piense que el servidor y el cliente residen en el mismo dominio. Ergo no hay CORS.

Considere este ejemplo.

Su servidor es mi-servidor.com y su cliente es mi-cliente.com. Configure nginx como sigue:

// nginx.conf

upstream server {
    server my-server.com;
}

upstream client {
    server my-client.com;
}

server {
    listen 80;

    server_name my-website.com;
    access_log /path/to/access/log/access.log;
    error_log /path/to/error/log/error.log;

    location / {
        proxy_pass http://client;
    }

    location ~ /server/(?<section>.*) {
        rewrite ^/server/(.*)$ /$1 break;
        proxy_pass http://server;
    }
}

Aquí mi-sitio.com será el nombre resultante del sitio web donde el código será accesible (nombre del sitio web proxy). Una vez configurado nginx de esta forma. Usted tendrá que modificar las solicitudes de tal manera que:

  • Todas las llamadas a la API cambien de `my-server.com/
Comentarios (0)

Temporalmente resolver este problema por un plugin de Chrome llamado CORS. Por cierto, el servidor backend tiene que enviar la cabecera adecuada a las solicitudes frontales.

Comentarios (1)

Otra forma además de @Nahush's respuesta, si ya está utilizando Express framework en el proyecto, entonces usted puede evitar el uso de Nginx para reverse-proxy.

Una forma más sencilla es utilizar express-http-proxy

  1. ejecuta npm run build para crear el bundle.

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

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

 //definir la ruta de build

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

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

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

Utiliza '/api/api-server' desde el código de react para llamar a la API.

Por lo tanto, que el navegador enviará solicitud al mismo host que será internamente redirigir la solicitud a otro servidor y el navegador se sentirá que viene del mismo origen ;)

Rvy Pandey
Respuesta editada 8º enero 2019 в 7:14
Comentarios (0)