Angular2 Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response

问题:

I am building my application in Angular 2 and Laravel 5.4. Angular2 is for client side and laravel 5.4 is for server side. I created APIs in laravel and requesting those APIs from Angular2.

In Laravel, I configured Oauth 2 passport service which is authenticating all APIs. In each API call I am sending below headers.

'Content-Type', 'Authorization'

The way how I am calling APIs with headers.

private headers = new Headers({'Content-Type': 'application/json', 'Authorization': 'Bearer ' + localStorage.getItem('access_token') });   let body = JSON.stringify({ user_id, company_id });             console.log(this.headers);             this.http.post(this.BuyerCostSetting, body, {headers:this.headers} )             .subscribe(                 response => {                     console.log('here');                     console.log(response);                                   },                 error => {                     console.log(error.text());                 }             ); 

When I am hitting this API from Angular2, it is showing the below error:

Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response 

回答1:

The errormessage is clear, 'Authorization' header is not allowed by your backend. In your backend Laravel application you have to set a response header containing:

Access-Control-Allow-Headers : 'Content-Type', 'Authorization' 

see further documentation here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers

文章来源: Angular2 Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response