CORS error - No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

I am using an Angular front end to connect to a WEB API 2 backend. The failing use case is the following. When a user registers, on successful registration, they must be logged into the system and be redirected to a new page to collect further information. I am using TOKENS for authentication.

I have enabled CORS in the WebAPI config:

 var cors = new EnableCorsAttribute("http://localhost:7812", "*", "*");
        config.EnableCors(cors);   

The registration request is successful and the response headers have the required CORS headers:

**Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:http://localhost:7812**
Content-Length:0
Date:Sun, 24 Aug 2014 09:31:55 GMT
Server:Microsoft-IIS/8.0
X-Powered-By:ASP.NET
X-SourceFiles:=?UTF-8?B?QzpcUHJvamVjdHNcVGVzdGluZ1xNYWx0QXBhcnRtZW50c1xNYWx0YXBhcnRtZW50cy5BUElcTWFsdGFwYXJ0bWVudHMuQVBJXGFwaVxhY2NvdW50XHJlZ2lzdGVy?=

In the next step I attempt to log in the user to the system. As part of the login, the front end requests a TOKEN from the server at Request URL:http://localhost:7802/token. The request header once again sends a Origin header Origin:http://localhost:7812 but this time I get the error : XMLHttpRequest cannot load http://localhost:7802/token. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:7812' is therefore not allowed access.

Anyone have any ideas?

Solution 1

When dealing with CORS, we need to keep in mind that there may be two requests sent by the browsers for a non GET request. There is usually the preflight (OPTIONS) request and then the actual request (POST). During the preflight requests, the server needs to add the Access-Control-Allow-Origin header with the value matching the request Origin header. This authorizes the subsequent request to be sent.

For the subsequent/actual request, the server also needs to add the Access-Control-Allow-Origin header. Otherwise, this request fails.

When using the OWIN OAuthAuthorizationServerProvider, we need to customize the MatchEndpoint handler to manage the header logic. This handler is executed before validate client authentication.

For more background information, look at this link: http://www.ozkary.com/2016/04/web-api-owin-cors-handling-no-access.html

Solution 2

It's because of Preflighted requests.

Read these articles for solutions:

• How to make CORS Authentication in WebAPI 2?
• http://www.codeproject.com/Articles/617892/Using-CORS-in-ASP-NET-WebAPI-Without-Being-a-Rocke

Comments

[Greg]

Yes, its a preflight request to get the token. I tried removing all the code enabling CORS in the config code and putting it in the WEB config. The exception then changes to a HTTP 405 - Method not allowed but the config setting EXPLICITLY allows all methods ( <add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS, PUT, DELETE" />) Makes no sense at all

[wilver]

I usually use just OWIN configurations for CORS, but I think you should keep both: the EnableCorsAttribute with httpprotocol. if you want here is my solution: github.com/williamverdolini/discitur-api/blob/master/App_Sta‌​rt/…

[Greg]

Thanks - I will look at your solution, however, I want to try and understand what the issue is before I go there. I have enabled CORS in the OWIN config and the WEB config and I get a new error saying there are multiple CORS headers. Understandable. So then I remove the WEB config settings. So at this point I only have the OWIN config active...Back to square one.... same error

[Greg]

@William - I have checked your code. My understanding at a basic level is that 2 things must happen. 1. The OAuthAuthorizationServerOptions must be set. 2. The app must call CORS (app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll); I can see no special settings that apply to reflight requests. Since these are the only request types that are breaking, there musts be some additional information I am not aware of.

[wilver]

I've removed OPTIONSVerbHandler in web.config. github.com/williamverdolini/discitur-api/blob/master/… see: stevefenton.co.uk/Content/Blog/Date/201211/Blog/… and thoughtfulpractices.blogspot.it/2013/12/…

[Greg]

OK - I have enabled CORS in 1. My Startup, My WebAPI config, my Account controller AND in my Angular app. I have replaced the Web Config Handler with the new remove name = "OPTIONS" and tried with "OPTIONSVerbHandler". Nothing works. Anyway, I will leave you in peace now. Thanks for the help