How can I enable CORS (Cross-Origin Resource Sharing) ?

[garaving]

Failed to load http://xxxxxx.com//assets/i18n/it.json: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:5500' is therefore not allowed access.

[ritwickdey]

Same as #64

[ritwickdey]

This features is already added in v3.1.0. (Sorry, I forget to close it)

[amirblum]

It seems like CORS still isn't enabled on the local server. I tested using test-cars.org and returns an error when trying to GET one of the files from the server. Any additional steps I'm missing? Anything that needs to be enabled in the settings?

[Beta6484]

I still can't access .json files from external domains. Am I forgetting to set something up?

[JonathanWilbur]

[JammiM]

I have also encountered a CORS issue when trying to request a API, are you sure that you have CORS enabled ?

I'm using Safari version 11.1.2

the endpoint is
https://www.cryptocompare.com/api/data/coinlist

[SuperRoach]

Using 5.4.0, I'm getting the same problem when trying to call https://api.flickr.com/services . This is with Firefox.

[veuncent]

Same issue here in Chrome, Firefox and Edge on Windows 10.
Is there anything we need to configure before this would work? Thanks!

Edit: I seem to have fixed my issue by simply loosening the CORS settings on my target resource. Now I don't get any errors anymore regarding a missing 'Access-Control-Allow-Origin' header.

[larryhu]

Temporary suggestion -> #249 (comment)

[flyingduck92]

Hey I have the same issue when using d3.js. How to fix this issue?

d3.html('http://enable-cors.org')
  .get((err, data) => {
    console.log(data)
  })

[GoudronViande24]

Still hasn't been fixed.

[RafaPatino01]

Same problem

XHRGEThttp://example.com/movies.json
[HTTP/1.1 404 Not Found 81ms]

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://example.com/movies.json. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 404.

Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.
GEThttp://127.0.0.1:5500/favicon.ico

[shadynasrat]

Still some times its not working... please fix this

[sgalcheung]

same problem, I use the latest Live Server v5.7.5

you can try live-server --cors using npm live server

[andreas-stricker]

same problem here with Live Server v5.7.9

[vacing]

https://marketplace.visualstudio.com/items?itemName=yandeu.five-server

maybe use five-server instead

[asitanc]

Access-Control-Allow-Origin can have three possible directives (*, origin, or null) to tell the browser from which origin can one access certain resources.

The issue is with the response from the backend which is/was missing appropriate header. Thats why the issue is occurring "sometimes"; with some URLs or with other tools as well. And it should be unrelated to liveserver in vscode.

One cannot fetch a resource that they are not allowed to fetch.

So, your backend should return response with header Access-Control-Allow-Origin as wildcard (*) or specify the origin. If you specify the origin, the origin must match with your server (if you make request from example.com; the origin must be example.com).

You can check the headers using cURL with --head parameter for further troubleshooting of the backend responses.

Also, some sources are available here:

• https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin
• https://web.dev/introduction-to-fetch/

There is also very very nice explanation of how the header works here:

• https://stackoverflow.com/questions/10636611/how-does-the-access-control-allow-origin-header-work