reactjs - dev - Problema CORS del servidor webpack

react js cors

Question

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

Answer 1

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

Answer 2

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.

Answer 3

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

Doc enlaces

• Servidor webpack dev
• Access-Control-Allow-Headers
• Access-Control-Allow-Methods
• Access-Control-Allow-Origin