Access to XMLHttpRequest at '...' from origin 'localhost:3000' has been blocked by CORS policy

Question

Edit

A little late, but I remember that I ended up solving this issue by setting credentials: true in my cors config on my backend.

By complete accident, I noticed that if I set credentials: false in my axios client on the frontend, everything worked fine. However, switching it to true kept throwing the error. I then put two and two together and set credentials: true on my backend and everything worked as expected.

My app used cookies, so it had to be done this way.

This may be a duplicate, but I havent found a thread relating specifically to my issue.

I am making the following API call:

const config = {
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET,PUT,POST,DELETE,PATCH,OPTIONS"
  }
};

const {
  data: { ip }
} = await axios.get("https://api.ipify.org?format=json", config);

And this throws an error:

Access to XMLHttpRequest at 'https://api.ipify.org/?format=json' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

When I deploy my app to Heroku, the API call works as expected. However it does not work when developing on my local machine. Not sure what I'm missing here.

This has been asked and answered over and over again. TL;DR **a script at `domain-a` can't fetch something at `domain-b` unless `server-b` allows it**. Settings CORS options in the `domain-a` script won't grant you more permissions, only a change at `server-b` will. — Nino Filiu, Jul 12 '19 at 15:10
Possible duplicate of [Why does my JavaScript code get a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error when Postman does not?](https://stackoverflow.com/questions/20035101/why-does-my-javascript-code-get-a-no-access-control-allow-origin-header-is-pr) — Nino Filiu, Jul 12 '19 at 15:10
@NinoFiliu So in this case domain-b allows Heroku domains, but disallows localhost? — Mike K, Jul 12 '19 at 15:14
`domain-a = http://localhost:3000` and `domain-b = https://api.ipify.org`. Yes, possibly. — Nino Filiu, Jul 12 '19 at 15:15

score 70 · Answer 1 · answered Nov 05 '19 at 17:45

70

if you are building your rest api in nodejs. Follow the folowing simple steps

Stop the Node.js server.

npm install cors --save

Add following lines to your server.js or index.js

var cors = require('cors')

app.use(cors()) // Use this after the variable declaration

Now try to make your api call on the client side and it should work

answered Nov 05 '19 at 17:45

Boateng Ampomah Frederick

849
1
6
8

9

The author of the post specified that he's pulling data from ipify.org, which is a privately owned domain. The author does not own this company/website/api, so this solution makes no sense, as this solution would work for a different scenario where the author would actually have control over the API service – Christopher Francisco Dec 15 '20 at 13:33
2

Even if this is an incorrect answer, in my opinion that's not the reason for deletion. As we can see from upvotes some people found it useful. – Mike Szyndel Dec 15 '20 at 21:17
In my case I did this in the back-end.Still its not working. I am using Node as back-end and React in the front-end. The front-end code looks like tthis. `export default axios.create({ baseURL: "http://localhost/3001/api/v1/restaurants" });` And in other component I am fetching like this `const response = await RestaurantApi.get("/") ; ` I am still getting the error. – bad_coder9042093 Jun 20 '21 at 11:09

score 48 · Accepted Answer · answered Jan 24 '21 at 04:03

After many days finally I got a solution . Instead of using CORS simply like this

const cors = require('cors');

app.use(cors());

in your server index.js using CORS option will solve the issue and now you can pass cookies or other credentials

const cors = require('cors');
const corsOptions ={
    origin:'http://localhost:3000', 
    credentials:true,            //access-control-allow-credentials:true
    optionSuccessStatus:200
}
app.use(cors(corsOptions));

Christopher Francisco · Answer 3 · 2019-07-12T15:21:17.860

12

You can't really fetch data from servers, with a different hostname, that don't have a CORS policy to allow request from your domain.

In simpler words, localhost can't call ipify.org unless it allows it. It seems like it doesn't, and I assume that server is not managed by you. So your only option is to go with a reverse proxy. You can read how to create an http proxy with node here.

What you need is for your app to be served on a fake/stubbed host, rather than localhost:

local.development.ipify.org -> proxies to localhost:3000

That way, when you make your api call, you are under the same domain as ipify.org, and you won't get any CORS issues.

edited Jul 12 '19 at 15:21

answered Jul 12 '19 at 14:59

Christopher Francisco

15,672
28
94
206

Can you please explain how Node is relevant here? The call works on the Heroku app, but does not work on my localhost. Do I need to create an http proxy with React? Or it has to be node? My Node backend isn't even reached at any point, because the axios call from the frontend fails before attempting to communicate with the backend – Mike K Jul 12 '19 at 15:02
The important bit is the reverse proxy. Node isn't really relevant, you can use any tool you want to create your reverse proxy, or even an Nginx. What you want is for your app not to be served on localhost, but on a stubbed subdomain. I'll update my answer. – Christopher Francisco Jul 12 '19 at 15:19

score 8 · Answer 4 · answered Jan 22 '20 at 15:11

8

This article solved my problem in no time.

The quickest fix you can make is to install the moesif CORS extension . Once installed, click it in your browser to activate the extension. Make sure the icon’s label goes from “off” to “on“

answered Jan 22 '20 at 15:11

Yannick Lescure

109
2
3

score 6 · Answer 5 · answered Sep 04 '20 at 04:06

First of all in your back-end app like express app you have to enable cors

like :

install cors running the command npm i cors
then go to your server.js or app.js or index.js file and add

var cors = require('cors');
app.use(cors())

3.cors will enable your client or front-end app to access your back-end routes. finally go to your routes and inside get route paste the following lines

router.get("/", (req, res) => {
res.setHeader("Access-Control-Allow-Origin", "*")
res.setHeader("Access-Control-Allow-Credentials", "true");
res.setHeader("Access-Control-Max-Age", "1800");
res.setHeader("Access-Control-Allow-Headers", "content-type");
res.setHeader( "Access-Control-Allow-Methods", "PUT, POST, GET, DELETE, PATCH, OPTIONS" );
});

` I also suffered for 2 hours facing this issue and i resolved my problem like this.So hope this will help you

Yes, It worked for me in my MERN stack application...I hope this may help you too — Ruman, Aug 06 '21 at 05:32

score 5 · Answer 6 · edited Dec 15 '20 at 21:24

5

Go to your package.json file and add: "proxy": "your-api-url" but only the beginning/base, as an example if you are using the pokemon api, you just have to set "proxy" : "https://pokeapi.co/api/v2" and in your service file you can use axios with the path you need:

axios.get("/pokemon?limit=1000")
  .then(response => {
    resolve(response.data.results);
  })

edited Dec 15 '20 at 21:24

Mike Szyndel

10,461
10
47
63

answered Nov 21 '19 at 09:22

Gustavo Magnago

49
1
2

2

what if you are using 2 APIs? How it can understand from which API it will get the information? – Filippos Oct 18 '21 at 10:06

score 4 · Answer 7 · answered Jul 12 '19 at 15:03

What you seem to be trying to do is telling the server that it should use the CORS policies that you have specified in your Axios call. This is simply not how things work - the server defines its own CORS policies, and you simply must conform to them. If the server that you are trying to access does not support http://localhost:3000 in its CORS policies, you cannot use that origin with the API.

If the server is yours, look into the cors package and configure it to allow localhost:3000as an origin. If you do not own the server, you can't really change any CORS policies without asking the server owner if they would be willing to do so.

IT WORKS! thank you for introducing us in the CORS package – Aljohn Yamaro Sep 23 '19 at 11:16 — Aljohn Yamaro, Sep 23 '19 at 11:16

score 3 · Answer 8 · answered Nov 05 '22 at 22:49

3

There may be problem with the sequence of the

app.use(corse())

you should use it before defining routes

answered Nov 05 '22 at 22:49

Omer Faruk Dasar

101
5

score 3 · Answer 9 · answered Dec 01 '22 at 09:54

Use below codes in your server.js or app.js or index.js file of your backend

import cors from "cors";
const corsOrigin ={
    origin:'http://localhost:3000', //or whatever port your frontend is using
    credentials:true,            
    optionSuccessStatus:200
}
app.use(cors(corsOrigin));

score 2 · Answer 10 · edited Aug 27 '20 at 17:01

2

This may be due to the POST request from react app in development mode. You can bypass the CORS policy in development mode by the adding following line of code in your ' file.

{
    ...
    "proxy": "http://localhost:3000",
    ...
}

edited Aug 27 '20 at 17:01

Shmili Breuer

3,927
2
17
26

answered Jun 02 '20 at 08:07

Uddeshya Kumar

41
5

5

in which file this snippet should go? – Satish Patel May 03 '21 at 17:00
2

what about when in production? – Filippos Oct 18 '21 at 10:05
package.json file in scripts area "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "server": "json-server -p3001 --watch db.json", "proxy" : "http://localhost:3000" }, – Wanderi Mwangi Oct 26 '21 at 05:42

score 0 · Answer 11 · answered Mar 20 '22 at 16:58

0

I was getting this issue only on crome browser and on crome browser I had multilogin extension. When I delete this extension, this issue is fixed.

answered Mar 20 '22 at 16:58

rohitbansal2009

31
1
1
6

score 0 · Answer 12 · answered Sep 11 '22 at 07:30

always double check and make sure you're not missing a trailing slash "/" in your front-end

if that didn't solve it, you'd want to try installing CORS to you back-end by first,

pipenv install django-cors-headers

then, inside the settings add corsheaders to the installed apps as well as corsheaders.middleware.CorsMiddleware to the Middleware; if your computer didn't already.

last but not least, make sure to add CORS_ORIGIN_ALLOW_ALL = True after the ALLOWED_HOSTS.

i hope this helped (first question ever answered btw)

score 0 · Answer 13 · edited Sep 21 '22 at 07:28

0

You have to use res.setHeader with your response

res.setHeader("Access-Control-Allow-Origin", "*")
res.setHeader("Access-Control-Allow-Credentials", "true");
res.setHeader("Access-Control-Max-Age", "1800");
res.setHeader("Access-Control-Allow-Headers", "content-type");

edited Sep 21 '22 at 07:28

csgeek

711
6
15

answered Sep 13 '22 at 05:20

Geeth Malinda

21
2

score 0 · Answer 14 · answered Dec 29 '22 at 05:09

Had this issue when sending post request from reactjs app to a django api that I manage. Solved it by installing django-cors-headers, adding core headers to installed apps, adding core headers middleware, and lastly adding the react host domain 'http://localhost:3000' into the CORS_ORIGIN_WHITELIST inside of the django settings file.

After this, my react app was able to get responses from the django api.

score 0 · Answer 15 · answered Mar 28 '23 at 08:06

In my my case i was made a mistake, not adding annoations, Such as:

@RestConstroller
@Service
@Repository

also check you have added this in your constroller:

@RequestMapping("test")
@CrossOrigin(origins = { "*" })
public interface TestController {
}

score 0 · Answer 16 · answered May 31 '23 at 09:16

I got the same error when deploying the server in Vercel. If I deploy the server on localhost it doesn't happen. It is a Vercel error and apparently when the server has not been called for a while it is deactivated and the first call will always return the cors policy error.

To solve it you have to make 2 calls from the client, the first one wakes up the server (it can be a ping that doesn't answer anything) and once this call is made it will work correctly with the second call.

score -1 · Answer 17 · answered Aug 22 '22 at 05:56

-1

try to use fetch instead of Axios

return fetch(
  url +
    "?" +
    new URLSearchParams({
      email: email,
    }),
  {
    method: "GET",
    headers: {
      Authorization: `Bearer ${token}`,
    },
    mode: "no-cors",
  }
);

answered Aug 22 '22 at 05:56

MD Mahmudul Hasan

381
2
6

score -1 · Answer 18 · answered Jan 23 '23 at 06:17

-1

If you're using axios, check out the package version.

I faced same issue when using version 1.1.x. After change to 1.2.x, issue resolved.

"axios": "^1.2.3",

answered Jan 23 '23 at 06:17

crystal

185
1
4

Access to XMLHttpRequest at '...' from origin 'localhost:3000' has been blocked by CORS policy

Edit

18 Answers18

Linked