Error sending proper header values to a Preflight request from angular $http to asp.net webapi

Question

I am trying to send authentication data to a backend web api using angular's $http. When I add the line below, the browser starts sending preflight requests

$http.defaults.headers.common.Authorization = 'Basic xxxxyyyyyy' ;

From the web api side, When I get a request with OPTIONS method, I process it as follows.

if (request.Method == HttpMethod.Options && request.Headers.Any(k => k.Key.Contains("Origin")))
            {
                var response = new HttpResponseMessage(HttpStatusCode.OK);
                response.Headers.Add("Access-Control-Allow-Headers", "Content-Type,X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5,  Date, X-Api-Version, X-File-Name");
                response.Headers.Add("Access-Control-Allow-Origin", request.Headers.GetValues("Origin"));
                response.Headers.Add("Access-Control-Allow-Credentials", "true");
                response.Headers.Add("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE, OPTIONS");
                var tsc = new TaskCompletionSource<HttpResponseMessage>();
                tsc.SetResult(response);
                return tsc.Task;  
            }

But the preflight request fails access control check.

XMLHttpRequest cannot load http://localhost:53024/api............. Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:9000, *', but only one is allowed. Origin 'http://localhost:9000' is therefore not allowed access.

What am I doing wrong?

Community · Accepted Answer · 2017-05-23 11:46:13Z

3

"The Access-Control-Allow-Origin header contain multiple values" error solution is given in this link. Please give a try.

Hope this Helps!

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Oct 19, 2015 at 6:22

Divyesh Sharma

3051 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kez Nwichi · Accepted Answer · 2016-06-07 09:19:44Z

3

I had same problem and it was caused by web config setting:

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

Removing the Access-Control-Allow-Origin custom header will resolve this issue

answered Jun 7, 2016 at 9:19

Kez Nwichi

1411 silver badge5 bronze badges

Collectives™ on Stack Overflow

Error sending proper header values to a Preflight request from angular $http to asp.net webapi

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related