Javascript 具有凭据的网页包开发服务器CORS错误

我在重新加载热模块-开发服务器时遇到CORS问题。我正在端口

3000上使用dev服务器，但应用程序是从另一个端口
http://localhost:52024/

这是我得到的错误（Chrome，Windows 10）：

实际上，我得到了两个错误：第一个是由路径中的双斜杠引起的，另一个是与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中
hardcode
http://localhost:52024
作为允许原点输入
访问控制允许原点的值
响应标题：

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

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

当然，它的最大限制是，只有在源站运行的应用程序才允许跨源站从该网页服务器获取响应

或者，在处理请求响应的webpack dev服务器上运行的任何其他应用程序代码中，您都需要获取
Origin
请求头的值，并将其回显到
访问控制允许Origin
响应头值中：

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

这将产生与访问控制允许源代码相同的效果：

导致浏览器允许在任何源代码上运行的任何前端JavaScript访问响应，但也会阻止浏览器强制执行该操作“…不能是通配符

*

，当请求的凭据模式为

包含
”限制时，否则会被命中



更新：无论哪种情况，您都需要发送一个值为
true
的响应头，以便在请求中包含凭据时，浏览器允许前端JavaScript代码访问响应。
奇怪的是，我现在也遇到了同样的双斜杠问题。这可能是一个网页bug，我不确定。从
模块中删除
输出.publicPath
。导出对象为我修复了它。我的配置如下：

output: {
    filename: '[name].js',
    chunkFilename: '[name].js',
    path: path.resolve(__dirname, 'dist_dev'),
    publicPath: '/'
},

您可以在HTML模板中使用
，而不是
输出.publicPath
选项。请参阅

关于CORS问题，您可以尝试按照建议将访问控制头添加到dev服务器。
谢谢，我尝试了您的解决方案，但没有效果，没有任何更改。
output: {
    filename: '[name].js',
    chunkFilename: '[name].js',
    path: path.resolve(__dirname, 'dist_dev'),
    publicPath: '/'
},