reactjs - dev - Problema CORS del servidor webpack
react js cors (3)
Con webpack-dev-server 1.15.X puede usar esta configuración en su archivo de configuración:
devServer: {
contentBase: DIST_FOLDER,
port: 8888,
// Send API requests on localhost to API server get around CORS.
proxy: {
''/api'': {
target: {
host: "0.0.0.0",
protocol: ''http:'',
port: 8080
},
pathRewrite: {
''^/api'': ''''
}
}
}
},
Con este ejemplo, redireccionará todas las llamadas de http://0.0.0.0:8888/api/* a http://0.0.0.0:8080/* y CORS resuelto
Estoy usando webpack-dev-server v1.10.1 para mejorar mi proyecto Redux y tengo las siguientes opciones:
contentBase: `http://${config.HOST}:${config.PORT}`,
quiet: false,
noInfo: true,
hot: true,
inline: true,
lazy: false,
publicPath: configWebpack.output.publicPath,
headers: {"Access-Control-Allow-Origin": "*"},
stats: {colors: true}
En el JS, estoy usando una request del superagent para generar una llamada HTTP GET
request
.get(config.APIHost + apiUrl)
.set(''Accept'', ''application/json'')
.withCredentials()
.end(function (err, res) {
if (!err && res.body) {
disptach(() => {
return {
type: actionType || GET_DATA,
payload: {
response: res.body
}
}
});
}
});
Pero tengo el error CORS:
XMLHttpRequest cannot load http://localhost:8000/api/getContentByType?category=all. No ''Access-Control-Allow-Origin'' header is present on the requested resource. Origin ''http://localhost:5050'' is therefore not allowed access
¿Alguna sugerencia para resolver esto? Muchas gracias
Está ejecutando su JavaScript desde localhost:5050 pero su servidor de API es localhost:8000 . Esto viola la misma política de origen, por lo que el navegador no lo permite.
Puede modificar su servidor API para que CORS esté habilitado , o seguir las instrucciones en la página webpack-dev-server bajo "Combinación con un servidor existente" para combinar el servicio de activos con webpack-dev-server y su propio servidor API.
Otra forma de solucionarlo es agregar directamente los encabezados CORS requeridos al servidor dev:
devServer: {
...
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
"Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
}
}