web-dev-qa-db-fra.com

AngularJS: refus de définir l'en-tête non sécurisé "En-têtes de demandes d'accès"

J'essaie d'appeler une API REST s'exécutant localement à l'aide d'AngularJS. Voici le code 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);

        });

Mais je reçois une erreur dans la console du navigateur:

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

J'ai essayé d'interroger l'appel de l'API REST s'exécutant à http://127.0.0.1:5000/user/jay3dec en utilisant CURL.

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

Et cela a donné la sortie suivante:

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

Quelqu'un peut-il déceler quelle peut être la question?

angularjscors
10
iJade

Le code derrière $http.defaults.headers.common est 

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

En se référant à spécification XMLHttpRequest , le navigateur se terminera si l'en-tête est une correspondance ne respectant pas la casse pour l'un des en-têtes suivants

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

C'est pourquoi vous ne pouvez pas utiliser $http.defaults.headers.common pour définir l'en-tête Access-Control-Request-Headers. Le navigateur gérera les en-têtes de requête pour vous.

9
Rebornix

Le problème est dans CORS Vous devriez faire configurer votre côté serveur pour autoriser l'autorisation dans l'en-tête. Je ne sais pas ce que vous avez utilisé pour serveur, mais pour mon serveur asp.net web api 2, cela ressemble à:
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
CrueLHamsteR

Pour des raisons de sécurité, les navigateurs n'autorisent pas la tête à définir certains risques de sécurité, tels que cookie, Host, referer, etc. Ainsi, n'utilise pas le navigateur. pour analyser la tête de ligne. Il peut être utilisé sur le groupe d'agences envoyées côté serveur ..__ Référence: Partage de ressources d'origine croisée

0
Jack Chen