AngularJS: rifiutato di impostare un'intestazione non sicura "Access-Control-Request-Headers"

Question

Sto provando a chiamare un'API REST in esecuzione localmente utilizzando AngularJS. Ecco il codice 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); 

     }); 

Ma sto ottenendo un errore nella console del browser:

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

ho cercato di interrogare chiamare l'API REST in esecuzione a http://127.0.0.1:5000/user/jay3dec usando CURL.

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

e ha dato il seguente risultato:

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

Può uno punto quello che potrebbe essere il problema ??

Answer 1

Il codice dietro $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(); 
} 

riferimento alla XMLHttpRequest specification, navigatore terminerà se intestazione è una corrispondenza case-insensitive per una delle seguenti intestazioni

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

Ecco perché non si può utilizzare $http.defaults.headers.common per impostare l'intestazione Access-Control-Request-Headers. Il browser gestirà invece le intestazioni delle richieste per te.

Answer 2

Il problema è in CORS È necessario configurare il lato server per consentire l'autorizzazione nell'intestazione. Non so quello che siete abituati per server, ma per il mio assistente asp.net web API 2 sembrare:
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

Per motivi di sicurezza, i browser non consentono di testa ha messo un po 'di rischi per la sicurezza, come ad esempio biscotto, ospite, referer, ecc Quindi, non utilizzare il browser per analizzare il capo linea. Può essere utilizzato sul set lato server dell'agenzia inviata. Riferimento: Cross origin resource sharing