CORS Issue - Between Dev and Prod

Help
,
1

Hi there!
I’ve a problem with CORS when trying to run my ReactJS app, with my C# API when this API is hosted on my local IIS Server using HTTPS.

Here my setup detail

  • Front-End: ReactJS, TailWind CSS
  • Back-End: C# .Net 8, SQL DB, Hosted on a Local machine IIS.
  • Auth0 As IDProvider
  • I’ve my own domain Name, let say “MyDomain.ca”
  • SSL Cetificat Install on IIS

When I’m working on my Dev computer and I use my API that is also running on my Dev Machine “https://localhost:7248/api”, The Web Application is working as suppose. The CORS do not block me.

When I change the API URL for my domain https://MyDomain.ca/API CORS keep bloking me.

I’ve install Swagger with the API, so I can do call to API. I can do Login with it whitout any problem. Swager respoind me with:

access-control-allow-credentials: true 
access-control-allow-origin: https://MyDomain.ca  
cache-control: no-cache,no-store  
content-type: application/json; charset=utf-8  
date: Fri,06 Dec 2024 19:15:11 GMT  
expires: Thu,01 Jan 1970 00:00:00 GMT  
pragma: no-cache  
server: Microsoft-IIS/10.0  
vary: Origin  
x-firefox-spdy: h2  
x-powered-by: ASP.NET

But when I try wo do the login with my React App running from http://localhost:5173/ , I got error like those in the Browser Console

XHR OPTIONS https://myAuth0Domain.us.auth0.com/authorize?...blah.. CORS Missings Origin

And Also:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at

I’ve set my domain in the corresponding setting Auth0 application manager,
Application Login URI: https://MyDomain.ca
Allowed CallBack URL: https://MyDomain.ca/api/callback, http://localhost:5173/api/auth/callback
Allowed Web Origins: https://MyDomain.ca,http://localhost:5173

I’ve also set the origin in my .net API, like this:

      // [More code]

      builder.Services.AddHttpClient();
      builder.Services.AddCors(options =>
      {
          options.AddPolicy("AllowSpecificOrigin", corsBuilder =>
                  corsBuilder.WithOrigins("http://localhost:5173", 
                                          "https://MyDomain.ca")
                              .AllowAnyHeader()
                              .AllowAnyMethod()
                              .AllowCredentials());
      });
      // [More code]
      app.UseCors("AllowSpecificOrigin");
      // [More code]

I thing that the

access-control-allow-origin: https://MyDomain.ca

is missing from the header when I try the login from my WebApplication. But I don’t know what to do to fix this.

I need some help to resolve my problem.

Thank
Hugo