Angular2 Request-Header-Feld Autorisierung ist nicht erlaubt von Access-Control-Erlaube-Header in Preflight-Antwort

Question

Ich baue meine Anwendung in Angular 2 und Laravel 5.4. Angular2 ist für Client-Seite und Laravel 5.4 ist für Server-Seite. Ich habe APIs in Laravel erstellt und diese APIs von Angular2 angefordert.

In Laravel habe ich Oauth 2 Pass-Service konfiguriert, der alle APIs authentifiziert. In jedem API-Aufruf sende ich unter Kopfzeilen.

'Content-Type',

Die Art und Weise 'Authorization', wie ich APIs mit Header nenne.

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

Wenn ich diese API von Angular2 bin schlagen, wird die folgenden Fehler zeigt:

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

Answer 1

Die Fehlernachricht klar ist, 'Authorization' Header von Ihrem Backend ist nicht erlaubt. In Ihrem Backend Laravel Anwendung haben Sie enthält einen Antwort-Header setzen: hier

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

siehe weitere Dokumentation: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers