CODEWITHSUNDEEP
node.jsreactjsexpressaxioscors
Mike K
Mike K

Reputation: 6509

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

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.

Upvotes: 88

Views: 632825

Answers (20)

Shakil- The Coding monster
Shakil- The Coding monster

Reputation: 1077

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));

Upvotes: 5

sam
sam

Reputation: 21

so for me i was trying to send a request to an online api from local host, my code looked like something like the below

const fetchAssessmentResult = async () => {
try {
  const response = await axios.post(
    "https://mental-health-api-v1.onrender.com/predict",
    formData, // Assuming formData contains the assessment data
    {
      headers: {
        "Content-Type": "application/json",
      },
    }
  );

  console.log("Assessment result:", response.data);
  return response.data; // Return the response data if needed
} catch (error) {
  console.error("Error fetching assessment result:", error.message);
  // Handle errors gracefully
  return null;
}};

and when i try sending the request i kept on getting the error

Access to XMLHttpRequest at 'https://mental-health-api-v1.onrender.com/predict' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
Assessment.jsx:291 Error fetching assessment result: Network Error

and the solution i got were focused on fixing it from the backend code, but in my case i wasn't able to do that because i didn't have access to that code.

the main reason for why this problem occurred was because cors doesn't allow access to a sever from another server, unless it is specifically approved in the backend server.

so the way i tried to move around this is by using a proxy for my front end server that kind of tricks the backend server that the request is actually coming from itself, so in easy words i only just used a proxy.

i was using react so in react you can easily add the proxy in the package.json file

"name": "client",
"version": "0.1.0",
"private": true,
"proxy":"https://mental-health-api-v1.onrender.com",

i added the last proxy line which suggests it to use that link as a proxy

and i made a little modification in the way i was sending the request

const response = await axios.post( "https://mental-health-api-v1.onrender.com/predict",

instead of sending it like this since i've set the proxy i'll make it

const response = await axios.post( "/predict",

for more detailed explanation check the video below

https://www.youtube.com/watch?v=N4yUiQiTvwU

Upvotes: 0

Riaz Mahmud
Riaz Mahmud

Reputation: 119

Run

npm install cors

inside app.js

import cors from 'cors';

const corsOptions = {
   origin: 'http://localhost:3000',
   methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
   credentials: true,
   optionsSuccessStatus: 204,
};

app.use(cors(corsOptions));  // Use cors middleware

Call api:

function fetchProducts() {

  // Make a GET request to fetch data
  $.ajax({
       url: 'http://localhost:3000/<path>',
       method: 'GET',
       success: function (data) {
            console.log(data);
         });
       },
       error: function (error) {
            console.error('Error fetching data:', error.responseText);
       }
    });

It's working for me.

Upvotes: 0

cris.sol
cris.sol

Reputation: 471

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.

Upvotes: 0

Ashrik Ahamed
Ashrik Ahamed

Reputation: 455

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 {
}

Upvotes: 0

crystal
crystal

Reputation: 241

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",

Upvotes: -1

Alfredo Rodriguez
Alfredo Rodriguez

Reputation: 1223

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.

Upvotes: 0

Omer Faruk Dasar
Omer Faruk Dasar

Reputation: 150

There may be problem with the sequence of the

app.use(corse())

you should use it before defining routes

Upvotes: 4

Geeth Malinda
Geeth Malinda

Reputation: 21

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");

Upvotes: 0

Ryan Etedali
Ryan Etedali

Reputation: 1

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)

Upvotes: 0

MD Mahmudul Hasan
MD Mahmudul Hasan

Reputation: 389

try to use fetch instead of Axios

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

Upvotes: -1

rohitbansal2009
rohitbansal2009

Reputation: 31

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.

Upvotes: 0

VASU TIWARI
VASU TIWARI

Reputation: 768

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));

Upvotes: 56

Gustavo Magnago
Gustavo Magnago

Reputation: 49

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);
  })

Upvotes: 5

Ruman
Ruman

Reputation: 1044

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

like :

  1. install cors running the command npm i cors
  2. 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

Upvotes: 7

Uddeshya Kumar
Uddeshya Kumar

Reputation: 41

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",
    ...
}

Upvotes: 2

Yannick Lescure
Yannick Lescure

Reputation: 119

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“

Upvotes: 8

Boateng Ampomah Frederick
Boateng Ampomah Frederick

Reputation: 935

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

Upvotes: 78

Christopher Francisco
Christopher Francisco

Reputation: 16288

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.

Upvotes: 12

Nicholas Domenichini
Nicholas Domenichini

Reputation: 870

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.

Upvotes: 4

Related Questions