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.
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.
Strange, I was having the same double slashes issue right now. This could be a Webpack bug, I'm not sure. Removing the output.publicPath
form the modules.export
object fixed it for me. Mine was configured like this:
output: {
filename: '[name].js',
chunkFilename: '[name].js',
path: path.resolve(__dirname, 'dist_dev'),
publicPath: '/'
},
You could use <base href="http://localhost:3000/">
in your HTML template instead of the output.publicPath
option. See this answer.
Regarding CORS problems, you might try to add access control headers to the dev server as suggested here.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With