CORS Issue When Making POST Request from React Frontend to ASP.NET MVC API

Question

I'm facing a CORS (Cross-Origin Resource Sharing) issue while trying to make a POST request from my React frontend to an ASP.NET MVC API. I've tried various solutions but haven't been able to resolve the problem. Here are the details of my setup and the issue I'm encountering:

Background:

• I have a React frontend application hosted on https://localhost:44354.
• I'm trying to make a POST request to an API endpoint hosted at https://your-api-domain.com/Account/Login.

Issue Description:
When I make the POST request, I receive the following error message:
Access to XMLHttpRequest at 'https://your-api-domain.com/Account/Login' from origin 'https://localhost:44354' 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.

CORS Configuration:

• On the server-side (ASP.NET MVC), I've configured CORS as follows:
  • In the MvcApplication class, I've added the following line in Application_Start() method:
    var corsPolicy = new EnableCorsAttribute("https://your-api-domain.com/Account/Login", "", ""); GlobalConfiguration.Configuration.EnableCors(corsPolicy); On the client-side (React), I'm using the axios library to make the request:

const response = await axios.post(`${appDomain}/Account/Login`, {
    email: username,
    password: password,
}, {
    headers: {
        'Content-Type': 'application/json',
    }
});

Network Information:

• I've tested the API request using different tools and encountered the same CORS issue consistently.

Browser Behavior:

• The issue occurs across different browsers, including Chrome, Firefox, and Edge.

Steps Taken:

• I've tried adding specific headers in the request as mentioned in various online resources, but the issue persists.
• I've also attempted adjusting the CORS configuration on the server-side and the client-side, but haven't been successful.

Any help or guidance would be greatly appreciated. If you need more information or code snippets, please let me know. Thank you in advance for your assistance!

Answer 1

with CORS the api defines the domains that are allowed to access. in you case you want the domain https://localhost:44354 to have access. this the value you want to register with CORS on your MVC site.

Answer 2

You added the wrong URL to the cors config. The WebAPI must specify which clients can connect to the API. So you probably need something like this.

var corsPolicy = new EnableCorsAttribute("https://localhost:44354", "**", "post*");

In this config, I also specified that only post methods are allowed to make the config more restrictive.