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':'[email protected]',
'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'
},
};
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:
my-server.com/<API-path>
a my-website.com/server/<API-path>
.En caso de que no esté familiarizado con nginx, le aconsejo que consulte la documentación.
Para explicar lo que está sucediendo en la configuración anterior en breve:
upstream
define los servidores a los que se redirigirán las peticiones.server
se utiliza para definir el comportamiento real del servidor nginx.server_name
se utiliza para identificar el bloque que se utilizará para gestionar la petición actual.error_log
y access_log
se utilizan para definir la ubicación de los archivos de registro (utilizados para depuración).location
definen el manejo de diferentes tipos de peticiones:/
todas estas peticiones son redirigidas al cliente/server/<API-path>
. Redirigiremos todas estas peticiones al servidor.Nota: /server
se utiliza aquí para distinguir las peticiones del lado del cliente de las peticiones del lado del servidor. Como el dominio es el mismo no hay otra forma de distinguir las peticiones. Tenga en cuenta que no hay ninguna convención que le obligue a añadir /server
en todos los casos. Puede cambiarse por cualquier otra cadena, como /my-server/<API-path>
, /abc/<API-path>
, etc..
A pesar de que esta técnica debería funcionar, le aconsejo encarecidamente que añada soporte CORS al servidor, ya que esta es la forma ideal de manejar este tipo de situaciones.
Si desea evitar hacer todo esto durante el desarrollo que podría para este extensión de Chrome. Debería permitirle realizar peticiones entre dominios durante el desarrollo.
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
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 ;)