Question

我在热模块重新加载时遇到了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谢谢。

Answer 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: *具有相同的效果，只要导致浏览器允许在任何来源运行的任何前端JavaScript访问响应 - 但它也会阻止浏览器强加 “...当请求的凭据模式为*”限制时，不得为通配符include，否则会受到限制。

更新：在任何一种情况下，您还需要发送一个Access-Control-Allow-Credentials响应标头，其值为true，以便让浏览器允许您的前端JavaScript代码如果请求中包含凭据，则访问响应。

Answer 2

奇怪，我现在有同样的双斜线问题。这可能是一个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选项。请参阅this answer。

关于CORS问题，您可能会尝试按照建议here将访问控制标头添加到开发服务器。

带有凭据的Webpack-dev-server CORS错误

2 个答案: