http post - comment envoyer l'en-tête d'autorisation?

Question

Comment voulez-vous ajouter des en-têtes de votre requête http dans Angular2 RC6? J'ai reçu de code suivant:

login(login: String, password: String): Observable<boolean> {
    console.log(login);
    console.log(password);
    this.cookieService.removeAll();
    let headers = new Headers();
    headers.append("Authorization","Basic YW5ndWxhci13YXJlaG91c2Utc2VydmljZXM6MTIzNDU2");
    this.http.post(AUTHENTICATION_ENDPOINT + "?grant_type=password&scope=trust&username=" + login + "&password=" + password, null, {headers: headers}).subscribe(response => {
      console.log(response);
    });
    //some return
}

Le problème, c'est que angulaires ne pas ajouter un en-tête d'Autorisation. Au lieu de cela, dans la demande, je peux voir suivant en-têtes supplémentaires:

Access-Control-Request-Headers:authorization
Access-Control-Request-Method:POST

et sdch ajouté dans l'en-tête Accept-Encoding:

Accept-Encoding:gzip, deflate, sdch

Unfornately il n'y a pas d'en-tête d'Autorisation. Comment dois-je l'ajouter correctement?

Toute demande envoyée par mon code se présente comme suit:

OPTIONS /oauth/token?grant_type=password&scope=trust&username=asdf&password=asdf HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: POST
Origin: http://localhost:3002
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
Access-Control-Request-Headers: authorization
Accept: */*
Referer: http://localhost:3002/login
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8,pl;q=0.6

Answer 1

Ok. J'ai trouvé le problème.

Il n'était pas sur le côté Angulaire. Pour être honnête, il n'y avait pas de problème du tout.

Raison pour laquelle j'ai été incapable de remplir ma demande, le fait est que mon serveur d'application n'a pas été correctement d'OPTIONS de traitement de la demande.

Pourquoi les OPTIONS, pas de POST? Mon serveur d'application est différent de l'hôte, puis frontend. En raison de la SCRO mon navigateur a été la conversion de POSTE à l'OPTION: http://restlet.com/blog/2015/12/15/understanding-and-using-cors/

Avec l'aide de cette réponse: Autonome Printemps OAuth2 JWT Serveur d'Autorisation + de la SCRO

J'ai mis en place correcte du filtre sur mon côté serveur d'application.

Grâce à @Supamiu - la personne qui les doigts de moi que je suis de ne pas envoyer de courrier à tous.

Answer 2

vous avez besoin de RequestOptions

  let headers = new Headers({'Content-Type': 'application/json'});  
 headers.append('Authorization','Bearer ')
 let options = new RequestOptions({headers: headers});
 return this.http.post(APIname,body,options)
  .map(this.extractData)
  .catch(this.handleError);
 

pour plus de vérifier ce lien

Answer 3

Je crois que vous devez mapper le résultat avant de vous y abonner. Vous le configurez comme ceci:

   updateProfileInformation(user: User) {
    var headers = new Headers();
    headers.append('Content-Type', this.constants.jsonContentType);

    var t = localStorage.getItem("accessToken");
    headers.append("Authorization", "Bearer " + t;
    var body = JSON.stringify(user);

    return this.http.post(this.constants.userUrl + "UpdateUser", body, { headers: headers })
      .map((response: Response) => {
        var result = response.json();
        return result;
      })
      .catch(this.handleError)
      .subscribe(
      status => this.statusMessage = status,
      error => this.errorMessage = error,
      () => this.completeUpdateUser()
      );
  }
 

Answer 4

J'ai eu le même problème. Ceci est ma solution en utilisant la documentation angulaire et Firebase Token:

 getService()  {

const accessToken=this.afAuth.auth.currentUser.getToken().then(res=>{
  const httpOptions = {
    headers: new HttpHeaders({
      'Content-Type':  'application/json',
      'Authorization': res
    })
  };
  return this.http.get('Url',httpOptions)
    .subscribe(res => console.log(res));
}); }}
 

Answer 5

Voici la réponse détaillée à la question:

Passer des données dans l'en-tête HTTP de la côté Angulaire (Veuillez noter que je suis à l'aide de Angular4.0+ à la demande).

Il y a plus d'une façon de transmettre des données dans les en-têtes. La syntaxe est différente, mais tous les moyens la même.

// Option 1 
 const httpOptions = {
   headers: new HttpHeaders({
     'Authorization': 'my-auth-token',
     'ID': emp.UserID,
   })
 };


// Option 2

let httpHeaders = new HttpHeaders();
httpHeaders = httpHeaders.append('Authorization', 'my-auth-token');
httpHeaders = httpHeaders.append('ID', '001');
httpHeaders.set('Content-Type', 'application/json');    

let options = {headers:httpHeaders};


// Option 1
   return this.http.post(this.url + 'testMethod', body,httpOptions)

// Option 2
   return this.http.post(this.url + 'testMethod', body,options)

Dans l'appel, vous pouvez trouver le champ transmis comme un en-tête comme illustré dans l'image ci-dessous :

Encore, si vous êtes confrontés à des questions telles que.. (Vous devrez peut-être modifier le backend/WebAPI côté)

• Réponse à la demande de contrôle en amont ne passent pas de contrôle d'accès: Aucun "Access-Control-Allow-Origin" en-tête est présent sur la ressource demandée. Origine "http://localhost:4200" n'est donc pas permis accès

• Réponse pour le contrôle en amont n'ont pas HTTP état ok.

Trouver ma réponse détaillée à https://stackoverflow.com/a/52620468/3454221