React - axios - blocked by CORS policy. How to unblock

Question

I am running a simple API request to return data to a simple API search I've written. I say it's simple API call because there is no authentication needed and I can do it in python very simply.

However, I am having issues when using Axios in React.

Code:

 axios.get('https://www.keyforgegame.com/api/decks/59554ab7-b414-4220-8514-408a0dbf572d')

I've tried looking here and everyone one makes it sound so simple, but I can't seem to do anything. I've tried.

axios.get('https://www.keyforgegame.com/api/decks/59554ab7-b414-4220-8514-408a0dbf572d', { crossDomain: true })

and

axios.get('https://www.keyforgegame.com/api/decks/59554ab7-b414-4220-8514-408a0dbf572d, {
        headers: {
          'Access-Control-Allow-Origin': true,
        },
        })

But I keep getting errors like Access to XMLHttpRequest at 'https://www.keyforgegame.com/api/decks/59554ab7-b414-4220-8514-408a0dbf572d' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

or

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Do I need to put something in the header to make this work? Or is this some kind of setting I need to make in react.

Help!

Nothing you can do except for making the request using a proxy server, i.e. your backend. — nebuler, Dec 23 '18 at 23:59
See *“How to use a CORS proxy to get around “No Access-Control-Allow-Origin header” problems”* section of the answer at https://stackoverflow.com/a/43881141/441757 — sideshowbarker, Dec 24 '18 at 01:46
That worked! Thanks for the help and the link. As a new React.js programmer, I appreciate your help :) — Micah Pearce, Dec 24 '18 at 02:25

score 13 · Answer 1 · answered Dec 24 '18 at 00:02

You just cannot override CORS check from the client side. Just cannot. CORS is security feature and there would be no sense if it were possible just to disable it.

There are different approaches.

Depending on your words

I say it's simple API call because there is no authentication needed and I can do it in python very simply.

I believe you just need to ensure no extra headers are send so request would become simple in meaning of CORS. Across axios site I've found several ways to drop any extra headers for specific request:

a. either by specifying headers explicitly

b. or by creating different axios instance that you will not provide with Authorization header or whatever force CORS to be run
making proxy to be run on your domain
making backend to whitelist you domain with listing it in Access-Control-Allow- Origin response header

React - axios - blocked by CORS policy. How to unblock

1 Answers1