8

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?

Greg
  • 2,654
  • 3
  • 36
  • 59

4 Answers4

3

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

ozkary
  • 2,436
  • 1
  • 21
  • 20
1

It's because of Preflighted requests.

Read these articles for solutions:

Community
  • 1
  • 1
wilver
  • 2,106
  • 1
  • 19
  • 26
  • 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 ( ) Makes no sense at all – Greg Aug 24 '14 at 12:33
  • 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: https://github.com/williamverdolini/discitur-api/blob/master/App_Start/Startup.Auth.cs#L67 – wilver Aug 24 '14 at 12:39
  • 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 Aug 24 '14 at 12:52
  • @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. – Greg Aug 24 '14 at 13:32
  • I've removed OPTIONSVerbHandler in web.config. https://github.com/williamverdolini/discitur-api/blob/master/Web.config#L94 see: http://www.stevefenton.co.uk/Content/Blog/Date/201211/Blog/Using-CORS-With-ASP-NET-Web-API/ and http://thoughtfulpractices.blogspot.it/2013/12/enabling-cross-origin-requests-cors-in.html – wilver Aug 24 '14 at 13:38
  • 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 – Greg Aug 24 '14 at 14:12
0

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.

Omar.Alani
  • 4,050
  • 2
  • 20
  • 31
0

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.

fsm3xpert
  • 96
  • 3