XmlHttpRequest Block by CORS – No Access-Control-Allow-Origin

Question

I’m calling a backend ASP.NET Core C# API from Angular 13. I’m able to hit the controller, however, when it tries to access an external site it’s getting this error:

Access to XMLHttpRequest at ‘https://anotherdomain.com’ (Redirected from ‘https://localhost:44397/api/Auth/StartProcess from origin ‘https://localhost:44397’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

This is currently happening in my development environment (localhost). Any feedback is greatly appreciated.

// -- Startup Class  
// In configured services method:  
Services.AddCors(options => options.AddPolicy(“Cors”, builder =>  
{  
	builder.AllowAnyMethod();  
               builder.AllowAnyHeader();  
})));  
  
// In Configured method:  
app.UserForwardedHeaders();  
app.UseHttpsRedirection();  
app.UseStaticFiles();  
app.UseRouting();  
app.UseHsts();  
app.UseCors(“Cors”);  
  

//   --  Controller  
[HttpGet]  
[Route(“[action]”)]  
public async Task<IActionResult> StartProcess()  
{  
      var partnerName = “some value”;  
     var returnUrl = “some value”;  
  
      Await _authProvider.InitiateProcessAsync(partnerName, returnUrl)  
      Return new EmptyResult();  
}  
  


//  Home.Service.ts  
Contructor(private _http HttpClient, private _httpErrorHandler: ) { }  
  
public StartProcess() {  
return this.http.get(environment.pages.home.auth.route).subscribe(res =>  
Console.log(“response”, res);  
);  
  
}  
  

Answer 1

try to set default policy for development environment.
https://geeksarray.com/blog/how-to-setup-cors-policies-in-aspnet-core-web-api

if(builder.Environment.IsDevelopment())  
{  
    builder.Services.AddCors(options =>  
    {  
          
        options.AddDefaultPolicy(  
            policy =>  
            {  
                policy.AllowAnyOrigin()  
                    .AllowAnyHeader()  
                    .AllowAnyMethod();  
            });  
    });  
}  

Answer 2

The HTTP redirect response is returned to the angular application. The HTTP response has a location header that contains a URL. The angular application submits a GET to this URL. If the URL is a different domain and the domain is not configured for CORS then the browser (angular application) will throw a CORS error.

If you cannot enable CORS on the other domain then you'll need to rethink the design and do the HTTP call from Web API not the angular application.