Access Control Allow Origin?

[ronag]

What is might be the problem here? Do I need to set some setting on the dev server for this to work?

Failed to load resource: the server responded with a status of 404 (Not Found)
10.0.1.27/:1 XMLHttpRequest cannot load http://10.0.1.27:9090/build/2590dcf104e749604e15.hot-update.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://10.0.1.27:8080' is therefore not allowed access. The response had HTTP status code 404.

[gaearon]

Does hot reload actually fail, or does it just output this message?
There was some in issue in Webpack about errors which are not "errors" per se.

[ronag]

Hm, the issue went away by itself after a reload.

[gpbl]

@ronag i've seen this as well - maybe is your server restarting itself (nodemon)?

[Dakuan]

I also have this

items:1 XMLHttpRequest cannot load http://0.0.0.0:3000/6a5bec410cd2f01435bc.hot-update.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4130' is therefore not allowed access. The response had HTTP status code 404.

[Dakuan]

This patch to webpack-dev-server fixes this issue for me webpack/webpack-dev-server#110

[gaearon]

Let's leave this open for posterity.

[jbasdf]

I'm seeing the same issue when serving pages from node on 8888 and using the webpack dev server on 8080:
XMLHttpRequest cannot load http://localhost:8080/build/377563fabf427177f203.hot-update.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8888' is therefore not allowed access. The response had HTTP status code 404.

[Dakuan]

@jbasdf add cors middleware to your webpack-dev-server

[jbasdf]

Thanks @Dakuan, I ended up setting the headers when I start the server. Here's the code:

var webpackDevServer = require('webpack-dev-server');
new webpackDevServer(webpack(webpackConfig), {
  publicPath: "http://localhost:8080/build",
  hot: true,
  headers: { "Access-Control-Allow-Origin": "*" }
}).listen(settings.ports.hotPort, 'localhost', function(err, result){
  if(err){
    console.PluginError(err);
  }
  console.log('Webpack hot load server listening on port ' + settings.ports.hotPort);
});

[troutowicz]

CORS should not need to be enabled locally. If you want to access the dev server from another device in your local network, have your web servers run on your devices local IP instead if localhost. You can do this with webpack-dev-server by passing the --host flag.

[jbasdf]

I serve the page using node.js and the assets via the webpack-dev-server. They run on different ports so CORS has to be enabled or the browser will give you same origin errors.

[troutowicz]

Ports do not matter, the domain does. As long as your servers are running on an internal IP other than localhost, CORS is not needed when accessing server resources from another device in the network.

[jbasdf]

That was my assumption, but the version of Chrome I'm using wouldn't allow the socket connect until I added Access-Control-Allow-Origin": "*".

[troutowicz]

I have not been using Chrome, but I just went and tested in Chrome v40.0.2214.115 m, and everything works as expected.

[gaearon]

This is on Troubleshooting page now, so closing.

[sekoyo]

Thank @jbasdf ! Was having the same issue on Chrome 43

[catamphetamine]

I'm having this issue by the way, and I've set the headers in the config.
I'll go google for possible solutions.

[catamphetamine]

Oh, I'm not having this issue anymore: my port number in the corresponding webpack entry point "webpack-dev-server/client?http://127.0.0.1:... was messed up and that caused the error.

[gaearon]

@halt-hammerzeit Can you send a PR to Troubleshooting doc describing how you fixed the problem? Others may have the same issue.

[catamphetamine]

@gaearon Ok, here's how it was:

webpack.config.js

... [
    "webpack-dev-server/client?http://0.0.0.0:" + configuration.development.webpack.development_server.port,
...

And the variable configuration.development.webpack.development_server.port was basically undefined.

[jedwards1211]

@troutowicz ports do matter. According to MDN, "Two pages have the same origin if the protocol, port (if one is specified), and host are the same for both pages." An example shows that a request to a different port fails the same-origin policy.

[troutowicz]

@jedwards1211 Strange. When I was working with this project I never had CORS issues when using private ip-ranges.

[hugotox]

I'm having this issue with webpack-dev-server 2.4.2 and react-hot-loader 3.0.0-beta-6. Adding { 'Access-Control-Allow-Origin': '*' } did not work

[jedwards1211]

@troutowicz that is strange. I have no idea if all browsers enforce CORS for localhost or 0.0.0.0, but at least one person has seen it happen

[michaelBenin]

Also running into the same issue as @hugotox with v2.

[michaelBenin]

@hugotox in your webpack config, try adding this:

devServer: {
    headers: { "Access-Control-Allow-Origin": "*" }
  },

[hugotox]

@michaelBenin thanks a lot that fixed it!

[sheprdinc]

great that everyone is showing how to do it with the devServer, but what about the production server? where/how do i do that?

where/how do i add this:
headers: { "Access-Control-Allow-Origin": "*" }
to my production build?

[michaelBenin]

That's something configured in the cdn or web server serving the file. What are you using?

[DmacMcgreg]

Try adding this: (where app = express() )
app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); })

It worked for me. Add it near the top of the file after initializing express and before all of the webpack initialization code.

[SylarRuby]

You guys are the boss! Thanks for headers: { 'Access-Control-Allow-Origin': '*' } on https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md#no-access-control-allow-origin-header-is-present-on-the-requested-resource