CODEWITHSUNDEEP
c#angularjsasp.net-web-apixmlhttprequestcors
yohannist
yohannist

Reputation: 4194

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

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?

Upvotes: 1

Views: 21707

Answers (2)

Kez Nwichi
Kez Nwichi

Reputation: 141

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

Upvotes: 3

Divyesh Sharma
Divyesh Sharma

Reputation: 195

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

Hope this Helps!

Upvotes: 3

Related Questions