HMR failling because of Access-Control-Allow-Origin

[iamandrewluca]

Type of issue: bug

Chapter: 4 after adding HMR

If it's a bug:

[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
XMLHttpRequest cannot load http://localhost:7000/dist/ffacf69653bfa6a58a17.hot-update.json.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:8000' is therefore not allowed access.

Fix:

Add to webpack.config.babel.js

devServer: {
  // ...
  headers: { 'Access-Control-Allow-Origin': '*' }
}

[samgranieri]

This worked for me

[iamandrewluca]

Maybe is related to browser environment.
I will add in the evening more info

[iamandrewluca]

I don't know why this happened. Now I can't reproduce this problem.

[iamandrewluca]

Sorry for reopening. I will close it for now.

[umaulana]

I encountered same issue

[Myoursky]

I encountered same issue,but with the official code ,I can't reproduce this problem.

[verekia]

It is likely due to a more recent of Webpack Dev Server than the one I used in the walkthrough. I will update the tutorial asap. Sorry about that!

[zcntpz]

webpack.config.babel.js add
devServer: { headers: { 'Access-Control-Allow-Origin': 'http://localhost:8000' } }
to fix

[crisisdesign]

a better aproach could be import the web port from "./src/shared/config":

import { WDS_PORT, WEB_PORT } from './src/shared/config'
// [...]
devServer: { headers: { 'Access-Control-Allow-Origin': http://localhost:${WEB_PORT} }, },

[JiangdandanAbigale]

thanks.

[lavebug]

headers: { 'Access-Control-Allow-Origin': '*' } in webpack.config.babel.js worked. Thanks

[verekia]

It's fixed in the latest version of the tutorial.
Thanks everyone :)

[jerryOnlyZRJ]

Thank you! It works for me! 🎉