CORS issue when using Fetch API

Question

I'm making this JavaScript project based on Challonge API.

Whenever i attempt to use fetch to either GET or POST any data, I'm being returned the infamous CORS error:

Access to fetch at 'https://api.challonge.com/v1/tournaments.json?api_key=censored' from origin 'http://127.0.0.1:8080' 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.

It works flawlessly whenever i use the "Allow-Control-Allow-Origin * " extension, for obvious reasons, however, i can't demand my clients to download this extension to use my app. I've also tried uploading the project to a webserver, with no success.

I've been scouring the web for solutions, but I'm either too incompetent to see the answer right in front of me, or I haven't looked long enough.

Either way, can any one of you nudge me in the right direction?

Edit: I've tried to change the request mode to no-cors, same-origin and cors, to no avail.

Edit 2: alot of the 'fixes' I've seen for this revolved around changing the server-side .htaccess to allow my domain, but i'm not working for Challonge API, and I refuse to believe that's the only way

You will need to set up a proxy either on server you control or using a third party service. The benefit of doing it on your own server is to protect exposing your api key — charlietfl, Nov 10 '18 at 15:04
i am using an extension, and that works just fine. However, do you mean that my only way out of this, even in production, is to proxy it? — Kenneth Bolme Lund, Nov 10 '18 at 15:06
Yes. Many API's don't implement CORS so you don't end up exposing your credentials. Note I am assuming you don't control that API — charlietfl, Nov 10 '18 at 15:07
Either proxy or enable CORS on the server from where you are requesting. Read more from https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS — front_end_dev, Nov 10 '18 at 15:08
Your always able to circumvent the restriction it just might not be easy, either make the request from a domain you can communicate with and then proxy the result or you could patch your browser to now have such a check in the first place — Jay, Nov 10 '18 at 15:08
In your server CORS settings, try setting the value of “Access-Control-Allow-Origin” to your client url — Ahmed Hammad, Nov 10 '18 at 15:13

score 0 · Answer 1 · answered Nov 10 '18 at 15:12

I had the same issues as well and after many hours of researching on how CORS actually works, I came to the conclusion that setting up a proxy like charlietfl suggests is the best way to avoid CORS issues while developing locally. The proxy handles every request you do on your client and reroutes them to the original destination. That way you will probably not get any CORS issues.

Example: https://github.com/marhaupe/node-react-bootstrap.

CORS issue when using Fetch API

1 Answers1