The credential flag is true, but Access-Control-Allow-Credentials

Question

I am trying to connect to an ASP.NET Web-API web service from an AngularJS page, and I get the following

Credentials flag, but the header 'Access-Control-Allow-Credentials' is equal to ''. It must be "true" to allow credentials. The origin of http: // localhost: 221 'is therefore not allowed.

var cors = new EnableCorsAttribute("http://localhost:221", "*","GET,PUT,POST,DELETE"); config.EnableCors(cors); 

Using this AngularJS

  $http({ method: 'GET', url: 'http://localhost:1980/api/investors/62632', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, withCredentials: true // withCredentials: true, }).then(function onUserComplete(response) { // this callback will be called asynchronously // when the response is available }, function onError(response) { // called asynchronously if an error occurs // or server returns response with an error status. 

After reading many articles, I add this to web.config

  <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="http://localhost:221" /> </customHeaders> </httpProtocol> 

and I get this error message

The header "Access-Control-Allow-Origin" contains several localhost: 221, localhost: 221 values, but only one is allowed. Therefore, the location of localhost: 221 is not allowed.

Which really makes no sense since I added it once and it does not find it, but I add it to web.config and I get an error message adding it several times. I have read many articles and cannot find the correct answer. I am using Google Chrome. I would be very grateful for the help, as I am now taking out my hair.

Answer 1

The header is added twice by code, and the other by web.config. CORS support is used to add headers for CORS purposes. Custom configuration headers also add response headers to any request, so you can remove the configuration setting.

 var cors = new EnableCorsAttribute.. <customHeaders> <add name="Access-Control-Allow-Origin" value="http://localhost:221" /> </customHeaders> 

Since both of these areas add the same source twice, you get multiple values ​​in the header.

When calling AJAX with the withCredentials: true parameter, the response header must have Access-Control-Allow-Credentials = true . You must add this via code using SupportsCredentials = true for CORS attributes. Otherwise, you will get the error "Credential flag is" true ", but" Access-Control-Allow-Credentials "is" "

For more information about the withCredential parameter and the response header, see this article:

http://www.ozkary.com/2015/12/api-oauth-token-access-control-allow-credentials.html

hope this helps.

Answer 2

For anyone who uses WebApiConfig.cs:

 config.EnableCors(new EnableCorsAttribute("*", "*", "*") { SupportsCredentials = true }); 

Answer 3

I came across this question while trying to hit webapi on a .net core from an angular2 application. I had to add AllowCredentials () to the cors configuration in my Configure method in Startup.cs to look like this.

 public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) { ... app.UseCors(builder => builder .AllowCredentials() .WithOrigins("http://localhost:3000")); ... } 

Answer 4

Try the method described here for preflight queries:

ability to share resources for different sources in IIS7

And use the Google Postman or Fiddler extension to simplify CORS debugging. I bet you are adding the header twice, but without your whole code it's hard to debug. (hell, CORS is hard to debug even with code).

It seems to me that you should not have both web.config settings and the global EnableCors() attribute - this leads to a doubling.

It seems you are not adding the server part of Access-Control-Allow-Credentials anywhere, but it can be added with the AllowCors attribute, I'm not sure. (I partially process CORS in OWIN)