AngularJS: Refused to set unsafe header “Access-Control-Request-Headers”

问题

I'm trying to call a REST API running locally using AngularJS. Here is the AngularJS code :

$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);

        });

But I'm getting an errors in the browser console :

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

I tried to query call the REST API running at http://127.0.0.1:5000/user/jay3dec using CURL.

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

And it gave the following output :

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

Can any one spot what may be the issue ??

回答1:

The code behind $http.defaults.headers.common is

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();
}

Referring to XMLHttpRequest specification , browser will terminate if header is a case-insensitive match for one of the following headers

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

That's why you can't use $http.defaults.headers.common to set Access-Control-Request-Headers header. Browser will handle request headers for you instead.

回答2:

The problem is in CORS You should make configure your server side to allow Authorization in header. I don't know what you are used for server but for my asp.net web api 2 server it look like:
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:

For security reasons, browsers do not allow head has set some security risks, such as cookie, host, referer, etc. So, do not use the browser to parse the line head. It can be used on the server side set of agency sent. Reference: Cross origin resource sharing

来源：https://stackoverflow.com/questions/28140859/angularjs-refused-to-set-unsafe-header-access-control-request-headers

标签

angularjs

cors