edição webpack dev server CORS

Question

edição webpack dev server CORS

estou a usar webpack-dev-server v1.10.1 para aumentar o meu projecto Redux E tenho as opções abaixo:

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}

no JS, estou a usar request de superagent para gerar uma chamada 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
                            }
                        }
                    });
                }
          });

Mas eu tenho o erro do 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

Alguma sugestão para resolver isto? Muito obrigado.

20

reactjs cors superagent webpack-dev-server

Author: Dan Abramov, 2015-07-24

Source

3 answers

score 22 · Answer 1

Com webpack-dev-server 1.15.X você pode usar esta configuração no seu ficheiro de configuração:

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

Com este exemplo, irá redireccionar todas as chamadas de http://0.0.0.0:8888/api/* para http://0.0.0.0:8080/* e o CORS resolvido

score 13 · Answer 2

Outra forma de o contornar é adicionar directamente os cabeçalhos de CORS necessários ao 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"
  }
}

Ligações Doc

score 5 · Answer 3

Estás a correr o teu JavaScript de {[[0]} mas o teu servidor de API é localhost:8000. Isto viola a mesma política de origem, por isso o navegador não a autoriza.

Você pode modificar o seu servidor de API de modo que CORS é ativado, ou siga as instruções sobre o webpack-dev-server page em "Combinar com um servidor existente" para combinar ativos servir com webpack-dev-servidor e o seu próprio servidor de API.