CORS error when I load from local dev server

[amaharana]

The project builds fine and the dev server starts as expected. I have the react-userscripts-dev.user.js installed but console shows a CORS error when I load Google.

Access to fetch at 'http://localhost:8124/static/js/main.js' from origin 'https://www.google.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
VM5260:1 GET http://localhost:8124/static/js/main.js net::ERR_FAILED

How do you handle the CORS issue while running the dev server locally within Google's page context? I am probably doing something very silly!

[siefkenj]

Have you enabled CORS permissions for your userscript? (You can do so by editing userscript-header.js) https://stackoverflow.com/questions/24688294/how-do-i-allow-cross-origin-requests-from-greasemonkey-scripts-in-firefox

[amaharana]

Didn't help. Both FF and Chrome show the same error. I'll keep digging. Thanks!

[amaharana]

First I tried GM.xmlHttpRequest instead of GM_xmlhttpRequest as per the comment on this thread. When that didn't work, I tried adding the Access-Control-Allow-Origin: * header to the devServer configuration following this link in file config-overrides.js. That didn't work either. Setting webpack config isn't the simplest in the world, so I don't know if I was doing it right in the first place.

After struggling for few hours, finally the CORS Unblock plugin allowed a successful call to the dev server. Phew! Or use ModHeader to set the response header Access-Control-Allow-Origin: * and achieve the same result.

What puzzles me is that I did not need to add // @grant GM_xmlhttpRequest to react-userscripts-dev.user.js. Although I have several userscripts from other sources that do exactly that and work as expected. Go figure!

Thanks for the help!

[Christo1101]

@amaharana CORS Unblock works just fine!! But how do you solve this in production? As far as I understand this is just useful in development.

I'd appreciate your help!