8

I have a .NET Core 3.0 and Angular 8 web application. I have enabled CORS in Startup.cs and it works fine. I am using JWT authentication along with an interceptor on the angular side to append JWT token to each request. The call to a route with [Authorize] attribute is successful when the token is valid. When the token is expired/invalid, the server returns 401 as expected. But, the angular interceptor is not able to recognize the 401 error since there is a CORS issue as seen in the console error:

Access to XMLHttpRequest at 'https://localhost:5001/api/Users/test' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

On inspecting the response I could see that there were no Access-Control-Allow-Origin headers present in the response. Why does that happen? Please note that this does not happen if the token is valid.

Startup.cs:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseHttpsRedirection();

    app.UseRouting();

    app.UseAuthentication();

    app.UseAuthorization();

    app.UseCors(builder => builder.AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader());

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

Angular recieves the error status as status: 0, statusText: "Unknown Error".

Nimish David Mathew
  • 2,958
  • 6
  • 29
  • 45
  • *Why does that happen?* [Because CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) – Liam Nov 12 '19 at 13:27
  • Possible duplicate of [Why does my JavaScript code get a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error when Postman does not?](https://stackoverflow.com/questions/20035101/why-does-my-javascript-code-get-a-no-access-control-allow-origin-header-is-pr) – Liam Nov 12 '19 at 13:28
  • @Liam I have already mentioned that CORS is enabled and is working when JWT token is valid. – Nimish David Mathew Nov 12 '19 at 13:32

1 Answers1

18

UseCors should be placed above UseAuthentication and UseAuthorization:

app.UseCors(builder => builder
    .AllowAnyOrigin()
    .AllowAnyMethod()
    .AllowAnyHeader());

app.UseAuthentication();
app.UseAuthorization();

Otherwise, the CORS middleware will not run when the authorization middleware short-circuits the pipeline and so will not add the CORS headers. This is something that's a little different in ASP.NET Core 3.0 with the introduction of UseAuthorization, but the middleware ordering has always been important.

RickAndMSFT
  • 20,912
  • 8
  • 60
  • 78
Kirk Larkin
  • 84,915
  • 16
  • 214
  • 203
  • I'd like to add that if you have added any other custom middleware above UseCors you may get into similar issue. I have put RequestLimit middleware which could break the pipeline and headers were not added in such scenario and I had no information about http error on angular app – Jacob May 22 '23 at 16:16