Angular 2 AspNetCore WebApi CORS issue: Response for preflight has invalid HTTP status code 401

Question

I am attempting to implement simple token based authentication in an Angular 2 RC6 application against an AspNetCore WebApi project that I've implemented in Visual Studio 2015.

I have put my sample application on github at: https://github.com/tonywr71/Snazzle which is a fully functioning application.

In the application, I click on the Login menu item, put in login and password information then click login.

It successfully returns am authentication token, which I store in isolated storage.

I then click on the Fetch Data menu item, it calls a Sample Controller that has an Authorize attribute on it. It passes the token, which is retrieved from isolated storage and added to the header. But it fails with an error.

The error I am getting is "XMLHttpRequest cannot load http://localhost:5100/api/SampleData/WeatherForecasts. Response for preflight has invalid HTTP status code 401"

WeatherForecasts is a WebApi method that returns some json that is consumed by the Angular 2 client component.

401 is unauthorized, and the reason it is getting an unauthorized is due to the preflight ORIGIN call, because headers are not sent for ORIGIN calls.

When I run it with Postman, there are no issues once the token is added - the method call works. That is because Postman does not need to worry about CORS.

So my question is, how can I get AspNetCore to not check ORIGIN calls for authentication? Or if that's not the correct approach, how am I supposed to achieve this? Is there some middleware that I'm supposed to add?

Sanket · Accepted Answer · 2016-09-10 07:25:52Z

5

You will have to enable CORS on web api side.

To enabled CORS on web api side, you will have to do these steps-

First, add dependency in project.json - "Microsoft.AspNetCore.Cors": "1.0.0",

then enable CORS in startup.cs like this-

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

In case if you want to restrict to specific origin then you can do like this-

 app.UseCors(builder => builder.WithOrigins("example.com"));

You can find more information about CORS here

See if this helps.

answered Sep 10, 2016 at 7:25

Sanket

20.2k10 gold badges74 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

tone Over a year ago

Wow, that worked! I had to remove <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept,Authorization" /> <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /> </customHeaders> </httpProtocol> from the web.config, because it was doubling up, but there must be something there that needs to be added if I go down the web.config path.

beewest Over a year ago

Looks like you are using Token authentication. Did u turn on Windows Authentication for a test?

Sanket Over a year ago

No @Beewest I am not using windows authentication in my project.

baywet Over a year ago

In my case I had to use a nammed policy with the same options and add the EnableCors("policyname") on my controller. That may be because I'm using identityserver4 to protect my api.

Adrita Sharma · Accepted Answer · 2019-01-24 06:36:19Z

0

This helped me:

Go to Startup.cs file

Add the following in your ConfigureServices(IServiceCollection services) function

 services.AddCors(options =>
        {
            options.AddPolicy("CorsPolicy",
                builder => builder.AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader()
                .AllowCredentials());
        });

And this in your Configure(IApplicationBuilder app) function :

 app.UseCors("CorsPolicy");

edited Jan 24, 2019 at 6:36

answered Sep 24, 2017 at 9:24

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Collectives™ on Stack Overflow

Angular 2 AspNetCore WebApi CORS issue: Response for preflight has invalid HTTP status code 401

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related