Webpack-dev-server CORS error with credentials

Question

I'm getting CORS problems with hot module reloading - dev server. I'm using the dev-server on port 3000 but the application is served from another port http://localhost:52024/.

This is the error I'm getting (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!

Actually I'm getting two errors: the first is caused by the double slash // in the path, the other is the CORS-related error. This is my 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": "*"
        }
    }
};

I'm starting webpack with:

webpack-dev-server --config webpack.config.js --progress

Any idea? I'm using webpack 3.5.1 and webpack-dev-server 2.7.1 Thank you.

Answer 1

As far as fixing the CORS problem, you can do one of the following:

• 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.

---

Update: In either case, you’ll also need to send an Access-Control-Allow-Credentials response header with the value true in order to cause browsers to allow your frontend JavaScript code to access the response if credentials are included in the request.