I am using passport js with REACT and during fetching the logged in user-data the cors header of fetch isnt matching even though they are the same.
this is where i am sending fetch to
http://localhost:3001/profilebuilder
And address I am fetching from
http://localhost:5000/auth/login/success
app.use(
cors({
origin: 'http://localhost:3001/profilebuilder',
methods: "GET,POST,PUT,DELETE",
credentials: true,
})
);
app.listen("5000", () => {
console.log("Server is running!");
});
this is the client code
fetch("http://localhost:5000/auth/login/success", {
method: "GET",
credentials: "include",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
"Access-Control-Allow-Credentials": true,
},
})
.then((response) => {
if (response.status === 200) return response.json();
throw new Error("authentication has been failed!");
})
.then((resObject) => {
setProfile(resObject.user);
})
.catch((err) => {
console.log(err);
});
I am getting this error
Access to fetch at 'http://localhost:5000/auth/login/success'
from origin 'http://localhost:3001' has been blocked by CORS
policy: Response to preflight request doesn't pass access control
check: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:3001/profilebuilder'
that is not equal to the supplied origin. Have the server
send the header with a
valid value, or, if an opaque response serves your needs,
set the request's mode to 'no-cors' to fetch the resource with CORS disabled.