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

Question

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.

Answer 1

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