Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Allow cors on localhost

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 complicated 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',
    },
(...)
}
like image 378
Perdixo Avatar asked Jan 13 '20 23:01

Perdixo


People also ask

How do I enable localhost CORS?

1. Use the proxy setting in Create React App. "proxy": "https://cat-fact.herokuapp.com/", Now when you make an API request to https://localhost:3000/api/facts Create React App will proxy the API request to https://cat-fact.herokuapp.com/facts and the CORS error will be resolved.

Is it safe to allow CORS from localhost?

Having given the concept that CORS does not provide any additional security when talking about API access, this means that that allowing a particular domain like localhost does not make your API less secure.

How do I allow CORS access?

Simply activate the add-on and perform the request. CORS or Cross-Origin Resource Sharing is blocked in modern browsers by default (in JavaScript APIs). Installing this add-on will allow you to unblock this feature.

How do I bypass CORS error?

Open a network tab in your console. In the response header look for the Access-Control-Allow-Origin header. If it does not exist then add it as a middleware in the way we discussed above. If it does exist then make sure there is no URL mismatch with the website.


1 Answers

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

like image 151
Tamer Aktaş Avatar answered Sep 25 '22 08:09

Tamer Aktaş