webpack devサーバーのCORSの問題
使っています webpack-dev-server v1.10.1
Reduxプロジェクトを後押しするために、以下のオプションがあります。
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}
JSでは、request
からsuperagent
を使用して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
}
}
});
}
});
しかし、私は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
これを解決するための提案はありますか?どうもありがとう
Webpack-dev-server 1.15.Xを使用すると、設定ファイルで次の設定を使用できます。
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': ''
}
}
}
},
この例では、すべての呼び出しをhttp://0.0.0.0:8888/api/*
からhttp://0.0.0.0:8080/*
にリダイレクトし、CORSを解決します
この問題を回避する別の方法は、必要なCORSヘッダーを開発サーバーに直接追加することです。
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"
}
}
ドキュメントリンク
JavaScriptをlocalhost:5050
から実行していますが、APIサーバーはlocalhost:8000
です。これは同じOriginポリシーに違反するため、ブラウザはそれを許可しません。
CORSが有効になるようにAPIサーバーを変更するか 、またはwebpack-dev-の指示に従って 「既存のサーバーとの組み合わせ」の下のサーバーページ で、webpack-dev-serverおよび独自のAPIサーバーとアセットサービングを組み合わせます。
同じ問題がありましたが、私のAPIはhttpsプロトコル( https:// api ... 。)でした。 httpsでサーバーを起動し、 https:// localhost:808 を使用する必要がありました
devServer: {
headers: {
"Access-Control-Allow-Origin": "*",
https: true
}
.....
}