Champ d'en-tête Angular2 Request L'autorisation n'est pas autorisée par Access-Control-Allow-Headers dans la réponse de contrôle en amont

Question

Je construis mon application dans Angular 2 et Laravel 5.4. Angular2 est pour le côté client et laravel 5.4 pour le côté serveur. J'ai créé des API dans laravel et j'ai demandé ces API à Angular2.

Dans Laravel, j'ai configuré le service de passeport Oauth 2 qui authentifie toutes les API. Dans chaque appel d'API, j'envoie les en-têtes ci-dessous.

'Content-Type', 'Autorisation'

La façon dont je fais appel API avec les en-têtes.

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

Quand je frappais cette API de Angular2, elle manifeste l'erreur ci-dessous:

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

Answer 1

ErrorMessage est tête claire, 'Authorization' n'est pas autorisé par votre back-end. Dans votre back-end l'application Laravel vous devez définir un en-tête de réponse contenant:

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

voir d'autres documents ici: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers