5

I've created an asp.net web api 2 service with individual account security. I'm trying to call it form AngularJs as per this example: http://www.codeproject.com/Articles/742532/Using-Web-API-Individual-User-Account-plus-CORS-En could not get that to work so added some config from here: How to make CORS Authentication in WebAPI 2?

and can't get past this error: XMLHttpRequest cannot load 'serverRegisterUrl'. The 'Access-Control-Allow-Origin' header contains multiple values 'clientUrl, *, *', but only one is allowed. Origin 'clientUrl' is therefore not allowed access.

I don't understand this error message. I think that Access-Control-Allow-Origin string means allow origin clientUrl, all headers, all methods

I don't understand the problem. If I'm supposed to just specify the origin alone somewhere, I don't know where that is.

I'm running this on Microsoft Azure and using vs express for web 2013 update 2 just in case it matters.

I unfortunately had to take my links out of the error message because I need atleast reputation 10 here to post more then 2 links in a question.

Community
  • 1
  • 1
Alex Smotritsky
  • 153
  • 1
  • 6

3 Answers3

10

I got it working, I think it came down to configuration. Web.config: no "Access-Control-Allow-Origin" customHeaders node

Startup.Auth.cs:
// This must come first to intercept the /Token requests app.UseCors(CorsOptions.AllowAll);

// Enable the application to use bearer tokens to authenticate users app.UseOAuthBearerTokens(OAuthOptions);

WebApiConfig.cs: (not enabling cors here) //var cors = new EnableCorsAttribute("*", "*", "*"); //config.EnableCors(cors);

AccountController.cs: attribute on GetExternalLogin method: [EnableCors(origins: "*", headers: "*", methods: "*")]

I think that's my whole current CORS config.

Alex Smotritsky
  • 153
  • 1
  • 6
5

Just adding to @AlexSmotritsky's answer.

To make use of the UseCors method in 

app.UseCors(CorsOptions.AllowAll);

remember to install the Microsoft.Owin.Cors NuGet package and add the

using Microsoft.Owin.Cors; directive.

fransHbrink
  • 364
  • 5
  • 13
0

It seems that your Access-Control-Allow-Origin value was clientUrl, *, * which might be invalid. It only allows one value. You can put * means all origins are allowed, or the one you specified, for example your AngularJS host.

I had put my code at https://gist.github.com/shaunxu/8414a78cd8074432fc69 This might not be the east way but it works in my application.

Shaun Xu
  • 4,476
  • 2
  • 27
  • 41
  • Thank you for your code. Depending on how I configure things around it I either get: 500 (Internal Server Error) or No 'Access-Control-Allow-Origin' header is present on the requested resource. I'm going to figure out how to trace/log my service in azure as I don't know what's behind these 500 errors and I think I was generating them in some instances before I started using your class as well. – Alex Smotritsky May 14 '14 at 05:19
  • this is definitely an azure thing. my code works locally, 500 error happens in azure, will have to add error logging. – Alex Smotritsky May 15 '14 at 03:44