Credentials flag is 'true', but the 'Access-Control-Allow-Credentials

Question

I am trying to connect to a ASP.NET Web-API Web Service from an AngularJS page and I am getting the following

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

       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 the web.config

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

and I get this error message

The 'Access-Control-Allow-Origin' header contains multiple values localhost:221, localhost:221, but only one is allowed. Origin localhost:221 is therefore not allowed access.

Which really doesn't make any sense as I have added it once and it doesn't find it but I add it to web.config and get an error saying its been added multiple times. I have read many articles and can't seem to find the right answer. I am using Google Chrome. Would be very grateful for help as I am pulling my hair out right now.

Check this answer: http://stackoverflow.com/questions/21664988/no-http-resource-error-when-doing-put-post-cors-issue-angularjs-web-api-2/21667606#21667606 I had to remove the settings from web.config and leave them purely in code. Might be an IIS config issue — link64, Oct 21 '15 at 21:53

score 29 · Answer 1 · answered Dec 12 '16 at 12:35

29

For whom, who uses WebApiConfig.cs:

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

answered Dec 12 '16 at 12:35

Roman O

3,172
30
26

score 10 · Answer 2 · answered Jan 07 '16 at 18:28

The header is added twice once by the code and the other by the web.config. The CORS support is used to allow for the addition of headers for CORS purposes. The configuration custom headers also add response headers to any request, so you may want to remove the config setting.

var cors = new EnableCorsAttribute..

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

Since both of those areas are adding the same origin twice, you get the multiple values on the header.

When making an AJAX call with the parameter withCredentials: true, the response header should have the Access-Control-Allow-Credentials = true. You need to add that via code using SupportsCredentials = true for the CORS attributes. Otherwise you will get the error "Credentials flag is 'true', but the 'Access-Control-Allow-Credentials is ''"

For more information, on the withCredential parameter and the response header look at this article:

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

hope it helps.

Nice comment about SupportsCredentials = true attibute. For whom, who uses WebApiConfig.cs: config.EnableCors(new EnableCorsAttribute("\*", "\*", "\*") { SupportsCredentials = true }); — Roman O, Mar 01 '16 at 13:26
@RomanO Thank you, this is the only solution that actually worked for me — developer, Oct 12 '16 at 12:07
@RomanO, you should propose your answer as the answer to the question. It's the only solution that worked for me after hours of searching. — Kesty, Dec 12 '16 at 08:09

score 3 · Answer 3 · answered Aug 16 '16 at 18:14

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

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

score 0 · Answer 4 · edited May 23 '17 at 12:25

Try the method outlined here for preflight requests:

enabling cross-origin resource sharing on IIS7

And use the Chrome extension Postman or Fiddler for easier debugging of CORS. I'm willing to bet that you are adding the header twice, but without your entire code, it is difficult to debug. (heck, CORS is difficult to debug even with the code).

To me, it appears that you shouldn't have both the web.config setting as well as the global EnableCors() attribute - this causes the doubles.

You don't appear to be adding the Access-Control-Allow-Credentials anywhere server side, but it might be added by the AllowCors attribute, I am not sure. (I am partial to handling CORS in OWIN myself)

Credentials flag is 'true', but the 'Access-Control-Allow-Credentials

4 Answers4

Linked