current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite
1

I have an ASP.NET Web API running locally on some port and I have an angularjs app running on 8080. I want to access the api from the client.

I can successfully login and register my application because in my OAuthAuthorizationProvider explicitly sets the repsonse headers in the /Token endpoint.

    public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context)
    {
        context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "*" });

That's good. However, my other API methods do not seem to work. In my WebApiCongig.Register, I enable CORS and I add the EnableCors Attribute to my controllers to allow all origins, all headers, and all methods. I can set a break point in my get method on the controller and it gets hit just fine. Here is what I found watching the Network tab in chrome.

2 requests are are sent to the same api method. One method type OPTIONS and one with method type GET. The OPTIONS request header includes these two lines

Access-Control-Request-Headers:accept, authorization

Access-Control-Request-Method:GET

And the response includes these lines

Access-Control-Allow-Headers:authorization

Access-Control-Allow-Origin:*

However, the GET method request looks quite different. It returns ok with a status code of 200, but it does not inlcude and access control headers in the request or response. And like I said, it hits the API just fine. I can even do a POST and save to the database, but the client complains about the response!!

I've looked at every single SO question and tried every combination of enabling cors. I'm using Microsoft.AspNet.Cors version 5.2.2. I'm' using AngularJS version 1.3.8. I'm also using the $resource service instead of $http which doesn't seem to make a difference either.

If I can provide more information, please let me know.

BTW, I can access the Web API using Fiddler and/or Postman by simply including the Bearer token.

share|improve this question
    
so you mean its working with postman/fiddler but not with angular –  entre Dec 23 '14 at 15:43
    
Correct. I'm not sure if it's angular so much as it's the browser enforcing cross origin requests. –  Jesse Seger Dec 23 '14 at 16:05
    
have you done these settings in your ngapp.config myApp.config(function($httpProvider) { $httpProvider.defaults.useXDomain = true; delete $httpProvider.defaults.headers.common['X-Requested-With']; }); –  entre Dec 23 '14 at 16:07
    
Yes. But from what I've read, those needed to be included for older browser support. –  Jesse Seger Dec 23 '14 at 16:13
    
try it by running chrome with --disable-web-security options, if its working in fiddler ,it should work with above setting, make sure you see the notification stating that web-security is disabled –  entre Dec 23 '14 at 16:31

2 Answers 2

up vote 3 down vote

You don't seem to be handling the preflight Options requests.

Web API needs to respond to the Options request in order to confirm that it is indeed configured to support CORS.

To handle this, all you need to do is send an empty response back. You can do this inside your actions, or you can do it globally like this:

protected void Application_BeginRequest()
{
    if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
    {
        Response.Flush();
    }
}

This extra check was added to ensure that old APIs that were designed to accept only GET and POST requests will not be exploited. Imagine sending a DELETE request to an API designed when this verb didn't exist. The outcome is unpredictable and the results might be dangerous.

Also I suggest enabling Cors by web.config instead of config.EnableCors(cors);

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
  </customHeaders>
 </httpProtocol>

Please note that the Methods are all individually specified, instead of using *. This is because there is a bug occurring when using *.

share|improve this answer
    
This did not help. I'll post the answer in a bit. –  Jesse Seger Dec 24 '14 at 14:30
    
But I do thank you for the input!! It is great advice and I will take it!!!! –  Jesse Seger Dec 24 '14 at 14:40
    
It sure works, as it have worked for thousands of people. You probably just forgot to include one piece or another. –  Mihai-Andrei Dinculescu Dec 24 '14 at 18:54
    
I don't doubt that! However, as humble as it is for a dev, I had to submit a ticket to asp support. They could not figure it out either! It made me feel a little better. We implemented the solution I posted and it worked. Now there may be a bug in reading asterics in corspolicy. –  Jesse Seger Dec 25 '14 at 23:42
up vote 0 down vote accepted

This ended up being a simple fix. Simple, but it still doesn't take away from the bruises on my forehead. It seems like the more simple, the more frustrating.

I created my own custom cors policy provider attribute.

public class CorsPolicyProvider : Attribute, ICorsPolicyProvider
{
    private CorsPolicy _policy;

    public CorsPolicyProvider()
    {
        // Create a CORS policy.
        _policy = new CorsPolicy
        {
            AllowAnyMethod = true,
            AllowAnyHeader = true,
            AllowAnyOrigin = true
        };

       // Magic line right here
        _policy.Origins.Add("*");

    }

    public Task<CorsPolicy> GetCorsPolicyAsync(HttpRequestMessage request, CancellationToken cancellationToken)
    {
        return Task.FromResult(_policy);
    }
}

I played around with this for hours. Everything should work right?? I mean the EnableCors attribute should work too?? But it didn't. So I finally added the line above to explicitly add the origin to the policy. BAM!! It worked like magic. To use this just add the attribute to your api class or method you want to allow.

[Authorize]
[RoutePrefix("api/LicenseFiles")]
[CorsPolicyProvider]
//[EnableCors(origins: "*", headers: "*", methods: "*")] does not work!!!!!  at least I couldn't get it to work
public class MyController : ApiController
{
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.