I know it has kinda been answered already, but i don't understand how to fix my issue. I'm developing a static website using webpack 4, and i'm having issues when trying to load images (locally and from my online server).

How do you fix the Access to XMLHttpRequest at 'XXX' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource error when using webpack? I'm not using express (still learning webpack) and all the answers i find are quite a bit plicated for me and uses custom servers, which i don't..

Is there a simple method to bypass this?

By the way, i'm using <img src="XXX" alt="" crossorigin="anonymous"> with my images. Sometimes it works, sometimes it doesn't.. the articles i've found are way too technical for me at this point..

I've tried to add the following to my webpack.config.dev.js file, but it doesn't work either :

devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
      'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
    },
(...)
}

I know it has kinda been answered already, but i don't understand how to fix my issue. I'm developing a static website using webpack 4, and i'm having issues when trying to load images (locally and from my online server).

How do you fix the Access to XMLHttpRequest at 'XXX' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource error when using webpack? I'm not using express (still learning webpack) and all the answers i find are quite a bit plicated for me and uses custom servers, which i don't..

Is there a simple method to bypass this?

By the way, i'm using <img src="XXX" alt="" crossorigin="anonymous"> with my images. Sometimes it works, sometimes it doesn't.. the articles i've found are way too technical for me at this point..

I've tried to add the following to my webpack.config.dev.js file, but it doesn't work either :

devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
      'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
    },
(...)
}

• javascript
• cors

• I think there's no simple way around that. See below the answer how to disable the CORS, and a ton of other things, in Chrome (good thing you can do that from a different profile). I found that serving stuff off a very simple Experss server using CORS middleware is simpler in the long run. – 9000 Commented Jan 13, 2020 at 23:20

3 Answers 3

I think your images loaded from your online server cause the CORS warning and your webpack conf has nothing to do with it.

If you're using Chrome you can bypass CORS by using an extension like this or using Chrome's --disable-web-security argument explained as here

You could try to use JSONP, but it's kinda of a hack and it isn't allowed on every API

This method requires Google Chrome. Quit all Google Chrome windows and execute the following mand in your terminal, in any directory:

WINDOWS: Start-Process -FilePath "chrome.exe" -ArgumentList "--user-data-dir=$env:TEMP\chrome-XXXXXXXX"

MAC: open -a "Google Chrome" --args --user-data-dir=$(mktemp -d -t 'chrome-XXXXXXXX') --disable-web-security

In the new Google Chrome window that appears, search http://localhost:8080. (This number defaults to 8080, but if you have multiple ports open, use the port number webpack prints to the terminal.)

After you are done testing, quit Google Chrome to return to your normal security settings.