我在热模块重新加载时遇到 CORS 问题 - 开发服务器。我在 3000 端口上使用开发服务器，但应用程序是从另一个端口 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 响应 header :

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

  当然，一旦您为您的应用程序设置了生产服务器/域，请将 http://localhost:52024 更改为任何生产来源。

  当然，它带来的最大限制是，只有您在源站运行的应用程序才能获得来自该 webpack 服务器跨源的响应。

• 或者，在处理响应请求的 webpack 开发服务器上运行的任何其他应用程序代码中，您需要获取 Origin 请求 header 的值，然后回显它回到 Access-Control-Allow-Origin 响应 header value :

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

  就导致浏览器允许在任何来源运行的任何前端 JavaScript 访问响应而言，这与 Access-Control-Allow-Origin: * 具有相同的效果——但它还将阻止浏览器在请求的凭据模式为 include 时强加 “...不能是通配符 *” 限制，否则会得到命中。

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

关于javascript - 带有凭据的 Webpack-dev-server CORS 错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45575713/