CORS error: no "Access-Control-Allow-Origin" header on the requested resource

Question

I use the Angular frontend to connect to the WEB API 2 server. The following is a faulty use case. When a user registers, upon successful registration they must be registered in the system and redirected to a new page to collect additional information. I use TOKENS for authentication.

I have included CORS in the WebAPI configuration:

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

The registration request was 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 try to log in to the user system. As part of the login, the front end requests TOKEN from the server in Request URL:http://localhost:7802/token . The request header sends the Origin header again Origin:http://localhost:7812 , but this time I get an 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.

Does anyone have any idea?

Answer 1

When working with CORS, we need to keep in mind that there may be two requests sent by browsers for a request without a GET. Usually there is a preflight request (OPTIONS) and then an actual request (POST). During preflight requests, the server needs to add the Access-Control-Allow-Origin header with a value corresponding to the Origin request header. This allows a subsequent request to be sent.

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

When using OWIN OAuthAuthorizationServerProvider we need to configure the MatchEndpoint handler to control the header logic. This handler runs before the client authenticates.

Further information can be found at the following link: http://www.ozkary.com/2016/04/web-api-owin-cors-handling-no-access.html

Answer 2

This is due to pre-requested requests .

Read these articles for solutions:

• How to do 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 that you have two problems:

1- Using Web API 2, you need to add the header manually when you provide the carrier token.

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

refer to my article in which I use Web API 2 from the client side of AngularJS.

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

Hope this helps.

Answer 4

Use this line in web.config :

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

It fixes my problem, maybe it will also help you.