• Access-control-allow-origin Header Javascript
• Access To Xmlhttprequest At From Origin Has Been Blocked By Cors Policy

This question already has an answer here:

Cross Origin Resource Sharing (CORS): Is a W3C standard that allows a server to relax the same-origin policy. Is not a security feature, CORS relaxes security. An API is not safer by allowing CORS. For more information, see How CORS works. Allows a server to explicitly allow some cross-origin requests while rejecting others.

• No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API 7 answers
• How does Access-Control-Allow-Origin header work? 13 answers
• Why doesn't adding CORS headers to an OPTIONS route allow browsers to access my API? 28 answers

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:

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

Access-control-allow-origin Header Javascript

and

Access To Xmlhttprequest At From Origin Has Been Blocked By Cors Policy

But I keep getting errors likeAccess 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!

marked as duplicate by sideshowbarker corsDec 24 '18 at 1:45

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

1 Answer

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.

1. 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

2. making proxy to be run on your domain

3. making backend to whitelist you domain with listing it in Access-Control-Allow- Origin response header

Not the answer you're looking for? Browse other questions tagged reactjscorsaxios or ask your own question.

FYI this is the documentation that is currently available:

• cors - the Cross-Origin Resource Sharing protocol allows browsers to make cross-origin API calls. CORS is required by web applications running inside a browser which are loaded from a different domain than the API server. CORS headers are disabled by default (false). To enable, set cors to true, or to an object with the following options:

  • origin - a strings array of allowed origin servers ('Access-Control-Allow-Origin'). The array can contain any combination of fully qualified origins along with origin strings containing a wildcard '' character, or a single '' origin string. Defaults to any origin ['*'].

  • maxAge - number of seconds the browser should cache the CORS response ('Access-Control-Max-Age'). The greater the value, the longer it will take before the browser checks for changes in policy. Defaults to 86400 (one day).

  • headers - a strings array of allowed headers ('Access-Control-Allow-Headers'). Defaults to ['Accept', 'Authorization', 'Content-Type', 'If-None-Match'].

  • additionalHeaders - a strings array of additional headers to headers. Use this to keep the default headers in place.

  • exposedHeaders - a strings array of exposed headers ('Access-Control-Expose-Headers'). Defaults to ['WWW-Authenticate', 'Server-Authorization'].

  • additionalExposedHeaders - a strings array of additional headers to exposedHeaders. Use this to keep the default headers in place.

  • credentials - if true, allows user credentials to be sent ('Access-Control-Allow-Credentials'). Defaults to false.