CORS configuration does not work as expected

Question

Hello!

I am going through the course module "Create a full stack application by using React and minimal API for ASP.NET Core" and this unit describes steps to enable CORS in response to allow client app request data from API - https://learn.microsoft.com/en-us/training/modules/build-web-api-minimal-spa/5-exercise-create-api

I designed the request to talk with the API without proxy and requests are blocked by CORS policy.

I can't understand why and what is wrong, because I believe all is configured properly according to course and documentation.

What am I missing here?

Thanks in advance!

With regards, Roman.

This question is related to the following Learning Module

Answer 1

Hi RomKo,

Thank you for reaching out to Microsoft Q & A forum. 

Thank you for bringing the issue to our attention. The error message "cors missing allow origin" signals a problem with the Cross-Origin Resource Sharing (CORS) setup in our application. CORS serves as a security measure enforced by web browsers to regulate cross-origin HTTP requests.

Upon investigation, it appears that the CORS policy was not correctly applied, leading to the absence of necessary CORS headers in the response. The issue stems from the inclusion of "" (wildcard) as an allowed origin in the CORS policy. Allowing "" permits requests from any origin, potentially exposing security vulnerabilities and causing errors.

To rectify this, we've adjusted the CORS policy to explicitly define the origins from which we permit requests, such as "[http://example.com]" and "[http://localhost:3000]". This ensures that only requests from these trusted origins are accepted, bolstering the security of our application.

builder.Services.AddCors(options =>
{
    options.AddPolicy(name: MyAllowSpecificOrigins,
        builder =>
        {
            builder.WithOrigins(
              "http://example.com", 
              "http://localhost:3000"
            )
            .AllowAnyHeader()
            .AllowAnyMethod();
        });
});

This adjustment should properly enforce the CORS policy, ensuring that the necessary CORS headers, like Access-Control-Allow-Origin, are included in the response. Consequently, this will resolve the "cors missing allow origin" error and restore the proper functionality of our application.

If you have any further questions or concerns, please don't hesitate to reach out. We're here to assist you further.

If you've found the provided answer helpful, please click the "Accept Answer/Upvote" button. This will be beneficial to other members of the Microsoft Q&A forum community. 

Thank you.

Answer 2

you confused the vite proxy port with the core port.

• vite proxy: http://localhost:3000
• core api: http://localhost:5100

you should have configured the vite proxy to forward any request /pizza => http://localhost:5100

now in your react code you have two ways to call the api.

• http://localhost:3000/pizza => via proxy and does not require CORS
• http://localhost:5100/pizza => directly call core api requires CORS on port 5100

you picked the second, port 5100, but the api CORS settings were for port 3100.

note: if the intent was to have the api site host the react static pages (and use the proxy feature in dev), then a better api url would have been:

const API_URL = '/pizzas';