I have created a .Net Core 7 Web API and I m trying to call it from a React app. I ve added CORS policy in my backend code in the following manner -
builder.Services.AddCors(p => p.AddPolicy("corspolicy", builder =>
{
builder
.WithOrigins("http://localhost:3000/")
//.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader();
}));
app.UseCors("corspolicy");
However, I m still getting the following error in my React app when I log the response -
Access to fetch at https://localhost:7063/api/CloneAPI 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. If an opaque response serves your needs, set the request s mode to no-cors to fetch the resource with CORS disabled.
Access to fetch at https://localhost:7063/api/CloneAPI from origin http://localhost:3000 has been blocked by CORS policy: No Access-Control-Allow-Origin header is present on the requested resource. If an opaque response serves your needs, set the request s mode to no-cors to fetch the resource with CORS disabled.
If I allow all origins in my backend code like this -
builder.Services.AddCors(p => p.AddPolicy("corspolicy", builder =>
{
builder
//.WithOrigins("http://localhost:3000/")
.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader();
}));
app.UseCors("corspolicy");
then I am able to fetch all the data successfully. However, I don t want to allow all origins due to safety reasons. Can someone please help me out on why I am getting this error despite setting up CORS and the URLs are correct too?
My frontend code -
const [posts, setPosts] = useState([]);
useEffect(() => {
fetch("https://localhost:7063/api/CloneAPI")
.then((response) => response.json())
.then((data) => {
console.log(data);
setPosts(data);
})
.catch((err) => {
console.log(err.message);
});
}, []);