[英]Webpack-dev-server CORS error with credentials
我正在通过热模块重新加载 - 开发服务器获得CORS问题。 我在端口3000
上使用dev-server,但应用程序是从另一个端口http://localhost:52024/
。
这是我得到的错误(Chrome,Windows 10):
GET http://localhost:3000//sockjs-node/info?t=1502216500095 404 (Not Found)
XMLHttpRequest cannot load http://localhost:3000//sockjs-node/info?t=1502216500095. The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:52024' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
[WDS] Disconnected!
实际上我得到两个错误:第一个是由路径中的双斜杠//
引起的,另一个是与CORS相关的错误。 这是我的webpack.config.js
:
const webpack = require('webpack'),
path = require('path');
module.exports = {
entry: {
'admin': ['webpack-dev-server/client?http://localhost:3000', 'webpack/hot/only-dev-server', './src/admin/index.js']
},
output: {
path: path.join(__dirname, 'admin/dist'),
filename: '[name].js',
publicPath: 'http://localhost:3000'
},
module: {
rules: [
{ test: /\.js$/, include: path.join(__dirname, 'src'), use: ['react-hot-loader/webpack', 'babel-loader'] },
{ test: /\.css/, use: ['style-loader', 'css-loader'] },
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: ['url-loader?limit=10000&mimetype=application/font-woff'] },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: ['file-loader'] },
{ test: /\.(png|jpg)$/, use: ['url-loader?limit=8192'] }
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
],
devtool: 'cheap-module-eval-source-map',
devServer: {
port: 3000,
hot: true,
inline: true,
headers: {
"Access-Control-Allow-Origin": "*"
}
}
};
我正在启动webpack:
webpack-dev-server --config webpack.config.js --progress
任何想法? 我正在使用webpack 3.5.1
和webpack-dev-server 2.7.1
谢谢。
至于修复CORS问题,您可以执行以下操作之一:
在你的webpack.config.js
硬编码http://localhost:52024
作为允许的来源,进入Access-Control-Allow-Origin
响应头的值:
headers: { "Access-Control-Allow-Origin": "http://localhost:52024" }
当然,一旦为应用程序设置了生产服务器/域,请将http://localhost:52024
更改为生产源。
当然,随之而来的最大限制是,只允许在原点运行的应用程序从该webpack服务器跨域获取响应。
或者,在处理响应请求的webpack dev服务器上运行的任何其他应用程序代码中,您需要获取Origin
请求标头的值,然后将其回送到Access-Control-Allow-Origin
响应标头中值:
response.setHeader('Access-Control-Allow-Origin', request.headers.origin)
这与Access-Control-Allow-Origin: *
具有相同的效果Access-Control-Allow-Origin: *
导致浏览器允许在任何来源运行的任何前端JavaScript访问响应 - 但它也会阻止浏览器强加“...当请求的凭据模式include
“否则会受到限制的限制”时,不得为通配符*
。
更新:在任何一种情况下,您还需要发送值为true
的Access-Control-Allow-Credentials
响应标头,以便在请求中包含凭据时允许浏览器允许您的前端JavaScript代码访问响应。
很奇怪,我现在有同样的双斜线问题。 这可能是一个Webpack错误,我不确定。 删除output.publicPath
形式的modules.export
对象为我修复了它。 我的配置如下:
output: {
filename: '[name].js',
chunkFilename: '[name].js',
path: path.resolve(__dirname, 'dist_dev'),
publicPath: '/'
},
您可以在HTML模板中使用<base href="http://localhost:3000/">
而不是output.publicPath
选项。 看到这个答案 。
关于CORS问题,您可以尝试按照此处的建议将访问控制标头添加到开发服务器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.