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.
3 answers
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
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
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.