CORS configuration does not work as expected

RomKo 20 Reputation points
2024-05-15T10:07:49.2366667+00:00

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://video2.skills-academy.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

ASP.NET Core Training
ASP.NET Core Training
ASP.NET Core: A set of technologies in the .NET Framework for building web applications and XML web services.Training: Instruction to develop new skills.
16 questions
Accepted answer
  1. Pradeep M 1,470 Reputation points Microsoft Vendor
    2024-05-15T17:20:22.4433333+00:00

    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.

    1 person found this answer helpful.

1 additional answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Bruce (SqlWork.com) 60,201 Reputation points
    2024-05-15T17:59:19.7033333+00:00

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