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

Question

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

Answer 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