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

Question

我在使用dev server时遇到了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。谢谢。

- aghidini

Answer 1

关于解决CORS问题，您可以采取以下其中一种方法：

• In your webpack.config.js hardcode http://localhost:52024 as the allowed origin into the value of the Access-Control-Allow-Origin response header:

  headers: {
      "Access-Control-Allow-Origin": "http://localhost:52024"
  }
  

  And then of course once you have the production server/domain set up for your application, change that http://localhost:52024 to whatever the production origin is.

  Of course the big limitation that would carry with it is, only your application running at the origin will be allowed to get responses from that webpack server cross-origin.

• Alternatively, in whatever other application code you’re running on that webpack dev server that handles responding to requests, you need to get the value of the Origin request header and just echo that back into the Access-Control-Allow-Origin response-header value:

  response.setHeader('Access-Control-Allow-Origin', request.headers.origin)
  

  That’ll have the same effect as Access-Control-Allow-Origin: * as far as causing to the browser to allow any frontend JavaScript running at any origin to access the responses—but it will also prevent the browser from imposing that “…must not be the wildcard * when the request's credentials mode is include” restriction that otherwise would get hit.

---

更新: 无论哪种情况，您还需要发送一个带有值true的Access-Control-Allow-Credentials响应头，以使浏览器允许您的前端JavaScript代码在请求中包含凭据时访问响应。

- sideshowbarker

Answer 2

奇怪的是，我现在也遇到了双斜杠问题。这可能是 Webpack 的一个 bug，我不确定。从 modules.export 对象中删除 output.publicPath 可以解决这个问题。我的配置如下：

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问题，你可以尝试像这里建议的那样向开发服务器添加访问控制头。

- Rafa Viotti

---

谢谢，我尝试了你的解决方案，但它没有起作用，什么也没改变。 - aghidini