AngularJS：拒绝设置不安全的标头“Access-Control-Request-Headers”

Posted 2023-03-04

【中文标题】AngularJS：拒绝设置不安全的标头“Access-Control-Request-Headers”

【英文标题】：AngularJS: Refused to set unsafe header "Access-Control-Request-Headers"

【发布时间】：2015-03-24 07:39:49

【问题描述】：

我正在尝试使用 AngularJS 调用在本地运行的 REST API。这是 AngularJS 代码：

$http.defaults.headers.common = "Access-Control-Request-Headers": "accept, origin, authorization";

$http.defaults.headers.common['Authorization'] = 'Basic amF5M2RlYzpqYXk=';
$http(method: 'GET', url: 'http://127.0.0.1:5000/user/jay3dec').
        success(function(data, status, headers, config) 

        ).
        error(function(data, status, headers, config) 
            alert(data);

        );

但我在浏览器控制台中遇到错误：

Refused to set unsafe header "Access-Control-Request-Headers" 

我尝试使用 CURL 查询调用在 http://127.0.0.1:5000/user/jay3dec 上运行的 REST API。

curl -H "Origin: http://127.0.0.1:8000" -H "Authorization: Basic amF5M2RlYzpqYXk=" http://127.0.0.1:5000/user/jay3dec --verbose

它给出了以下输出：

> GET /user/jay3dec HTTP/1.1
> User-Agent: curl/7.35.0
> Host: 127.0.0.1:5000
> Accept: */*
> Origin: http://127.0.0.1:8000
> Authorization: Basic amF5M2RlYzpqYXk=
> 
* HTTP 1.0, assume close after body
< HTTP/1.0 200 OK
< Content-Type: application/json
< Content-Length: 454
< ETag: bff7b7db33baedb612276861e84faa8f7988efb1
< Last-Modified: Tue, 30 Dec 2014 14:32:31 GMT
< Access-Control-Allow-Origin: *
< Access-Control-Allow-Headers: Authorization
< Access-Control-Allow-Methods: HEAD, OPTIONS, GET
< Access-Control-Allow-Max-Age: 21600
< Server: Eve/0.4 Werkzeug/0.9.6 Python/2.7.6
< Date: Sun, 25 Jan 2015 20:00:29 GMT
< 
* Closing connection 0
"username": "jay3dec", "_updated": "Tue, 30 Dec 2014 14:32:31 GMT", "password": "jay", "firstname": "jay", "lastname": "raj", "phone": "9895590754", "_links": "self": "href": "/user/54a2b77f691d721ee170579d", "title": "User", "parent": "href": "", "title": "home", "collection": "href": "/user", "title": "user", "_created": "Tue, 30 Dec 2014 14:32:31 GMT", "_id": "54a2b77f691d721ee170579d", "_etag": "bff7b7db33baedb612276861e84faa8f7988efb1"

任何人都可以发现可能是什么问题吗？？

【参考方案1】：

$http.defaults.headers.common后面的代码是

var xhr = createXhr();

xhr.open(method, url, true);
  forEach(headers, function(value, key) 
    if (isDefined(value)) 
        xhr.setRequestHeader(key, value);
    
  );

...

function createXhr() 
    return new window.XMLHttpRequest();

参考XMLHttpRequest specification，如果标头与以下标头之一不区分大小写，浏览器将终止

Accept-Charset
Accept-Encoding
Access-Control-Request-Headers
Access-Control-Request-Method
Connection
Content-Length
...

这就是为什么你不能使用$http.defaults.headers.common 来设置Access-Control-Request-Headers 标头。浏览器将为您处理请求标头。

【参考方案2】：

问题出在CORS 您应该配置您的服务器端以允许在标头中进行授权。我不知道您用于服务器，但对于我的 asp.net web api 2 服务器，它看起来像： Web.config

 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="*" />
       <add name="Access-Control-Allow-Headers" value="Content-Type,Authorization" />
       <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
     </customHeaders>
   </httpProtocol>
 ......

【参考方案3】：

出于安全考虑，浏览器不允许head设置一些安全风险，如cookie、host、referer 等。所以，不要使用浏览器来解析行头。它可以用于代理发送的服务器端集。 参考：Cross origin resource sharing