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. 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?

Answer 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

Answer 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

Answer 3

I believe you got two problems :

1- With Web API 2, you need to add the header manually when you grant the bearer token.

2- Your data needs to be url encoded, so you need to intercept the $http post message to encode the data.

refer to my article which I use Web API 2 from an AngularJS client side.

http://www.codeproject.com/Articles/742532/Using-Web-API-Individual-User-Account-plus-CORS-En

Hope that helps.

Answer 4

Use these line in web.config :

<system.webServer>
  <modules>
    <remove name="WebDAVModule" />
    ...
  </modules>
  <handlers>
    <remove name="WebDAV" />
    ...
  </handlers>
</system.webServer>

Its fixes my problem, may be it also help you.