web-dev-qa-db-fra.com

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

Comment ajouter des en-têtes à votre demande http dans Angular2 RC6? J'ai le 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 est que angular n'ajoute pas l'en-tête d'autorisation. Au lieu de cela, je peux voir à la demande les en-têtes supplémentaires suivants:

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

et sdch ajoutés dans Accept-Encoding:

Accept-Encoding:gzip, deflate, sdch

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

Toute la requête envoyée par mon code ressemble à ceci:

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
resthttpauthenticationangulartypescript
40
Maciej Treder

D'accord. J'ai trouvé le problème.

Ce n'était pas du côté Angular. Pour être honnête, il n'y avait aucun problème.

La raison pour laquelle j’ai été incapable d’exécuter ma demande avec succès était que mon application serveur ne traitait pas correctement la demande OPTIONS.

Pourquoi OPTIONS, pas POST? Mon application serveur est sur un hôte différent, puis frontend. À cause de CORS, mon navigateur convertissait POST en OPTION: http://restlet.com/blog/2015/12/15/understanding-and-using-cors/

Avec l’aide de cette réponse: serveur d’autorisation Spring OAuth2 JWT autonome + CORS

J'ai mis en place un filtre approprié sur mon application côté serveur.

Merci à @Supamiu - la personne qui m'a pointé du doigt et que je n'envoie pas du tout POST.

26
Maciej Treder

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 contrôle ceci lien

15
kTn

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

Si vous êtes comme moi et que vous jouez le rôle principal dans votre TypeScript angulaire/ionique, cela ressemble à ..

  getPdf(endpoint: string): Observable<Blob> {
    let url = this.url + '/' + endpoint;
    let token = this.msal.accessToken;
    console.log(token);
    return this.http.post<Blob>(url, {
      headers: new HttpHeaders(
        {
          'Access-Control-Allow-Origin': 'https://localhost:5100',
          'Access-Control-Allow-Methods': 'POST',
          'Content-Type': 'application/pdf',
          'Authorization': 'Bearer ' + token,
          'Accept': '*/*',
        }),
        //responseType: ResponseContentType.Blob,
      });
  }

Et pendant que vous définissez les options mais ne paraissez pas comprendre pourquoi elles ne sont nulle part ..

Eh bien .. si vous étiez comme moi et que vous avez commencé cette post à partir d'un copier/coller d'un get, alors ...

Changer en:

  getPdf(endpoint: string): Observable<Blob> {
    let url = this.url + '/' + endpoint;
    let token = this.msal.accessToken;
    console.log(token);
    return this.http.post<Blob>(url, null, { //  <-----  notice the null  *****
      headers: new HttpHeaders(
        {
          'Authorization': 'Bearer ' + token,
          'Accept': '*/*',
        }),
        //responseType: ResponseContentType.Blob,
      });
  }
2
Adam Cox

J'ai eu le même problème. Ceci est ma solution en utilisant angular documentation 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));
}); }}
1
Othmane Daânouni

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

Transmettez les données dans l'en-tête HTTP à partir du côté Angular (veuillez noter que j'utilise Angular4.0 + dans l'application).

Il existe plusieurs façons de transmettre des données dans les en-têtes. La syntaxe est différente mais tout signifie la même chose.

// 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 passé en tant qu'en-tête, comme indiqué dans l'image ci-dessous: enter image description here

Cependant, si vous rencontrez des problèmes tels que .. (vous devrez peut-être modifier le côté backend/WebAPI)

  • La réponse à la demande de contrôle en amont ne réussit pas la vérification du contrôle d'accès: aucun en-tête '' Access-Control-Allow-Origin '' n'est présent sur la ressource demandée. Origin '' http: // localhost: 42 '' n'est donc pas autorisé à accéder

  • La réponse au contrôle en amont n'a pas le statut HTTP ok.

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

0
Trilok Pathak