AngularJS: Weigerte sich, unsafe Header "Access-Control-Request-Header"

Question

Ich versuche, eine lokal mit AngularJS ausgeführt REST-API aufzurufen. Hier ist der 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); 

     }); 

Aber ich bin ein Fehler in der Browser-Konsole bekommen:

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

Ich habe versucht, die REST-API auf http://127.0.0.1:5000/user/jay3dec läuft abzufragen rufen ROTATION verwenden.

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

Und es gab die folgende Ausgabe:

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

Kann jeder eine Stelle, was das Problem sein kann ??

Answer 1

Der Code hinter $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(); 
} 

zu XMLHttpRequest specification Bezug ist, Browser beendet wird, wenn Header eine Groß- und Kleinschreibung Übereinstimmung für eine der folgenden Überschriften

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

Das ist deshalb kann man nicht Verwenden Sie $http.defaults.headers.common, um Access-Control-Request-Headers Header festzulegen. Browser behandelt stattdessen Anforderungsheader für Sie.

Answer 2

Das Problem ist in CORS Sie sollten konfigurieren Sie Ihre Server-Seite Autorisierung im Header zulassen. Ich weiß nicht, was Sie für Server verwendet werden, aber für meine asp.net Web api 2 Server es aussehen wie:
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> 
...... 

Answer 3

Aus Sicherheitsgründen Browser erlauben nicht den Kopf gesetzt einige Sicherheitsrisiken, wie Cookie, Host, referer usw. Also, nicht den Browser verwenden den Zeilenkopf zu analysieren. Es kann auf dem serverseitigen Agentensatz verwendet werden. Referenz: Cross origin resource sharing