将正确的标头值发送到从角度 $http 到 asp.net webapi 的 Preflight 请求时出错

Posted 2023-03-03

【中文标题】将正确的标头值发送到从角度 $http 到 asp.net webapi 的 Preflight 请求时出错

【英文标题】：Error sending proper header values to a Preflight request from angular $http to asp.net webapi

【发布时间】：2016-01-17 09:45:23

【问题描述】：

我正在尝试使用 Angular 的 $http 将身份验证数据发送到后端 Web api。当我添加下面的行时，浏览器开始发送预检请求

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

从 web api 端，当我收到一个带有 OPTIONS 方法的请求时，我会按如下方式处理它。

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;  
            

但预检请求未通过访问控制检查。

XMLHttpRequest 无法加载http://localhost:53024/api...... 对预检请求的响应未通过访问控制检查： “Access-Control-Allow-Origin”标头包含多个值 'http://localhost:9000, *'，但只允许一个。起源 'http://localhost:9000' 因此不允许访问。

我做错了什么？

【参考方案1】：

我有同样的问题，这是由网络配置设置引起的：

<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>

删除 Access-Control-Allow-Origin 自定义标头将解决此问题

【参考方案2】：

“The Access-Control-Allow-Origin header contains multiple values”这个link给出了错误解决方案。请试一试。

希望对您有所帮助！