http-post – hoe verstuur ik de Authorization header?

Hoe voeg je headers toe aan je http-verzoek in Angular2 RC6?
Ik heb de volgende code:

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
}

Het probleem is dat angular geen Authorization-header toevoegt. In plaats daarvan kan ik op verzoek de volgende extra headers zien:

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

en sdch toegevoegd in Accept-Encoding:

Accept-Encoding:gzip, deflate, sdch

Helaas is er geen Authorization header. Hoe moet ik het correct toevoegen?

Het hele verzoek verzonden door mijn code ziet er als volgt uit:

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

Antwoord 1, autoriteit 100%

Ok. Ik heb een probleem gevonden.

Het was niet aan de hoekige kant. Om eerlijk te zijn, was er helemaal geen probleem.

De reden waarom ik mijn verzoek niet met succes kon uitvoeren, was dat mijn server-app het OPTIONS-verzoek niet correct afhandelde.

Waarom OPTIES, niet POST? Mijn server-app staat op een andere host en dan op de frontend. Vanwege CORS converteerde mijn browser POST naar OPTION:
http://restlet.com/blog/2015/12/ 15/begrijpen-en-gebruiken-cors/

Met behulp van dit antwoord:
Standalone Spring OAuth2 JWT-autorisatieserver + CORS

Ik heb het juiste filter geïmplementeerd in mijn server-side app.

Met dank aan @Supamiu – de persoon die me vingerde dat ik helemaal geen POST stuur.


Antwoord 2, autoriteit 53%

u hebt RequestOptions nodig

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

controleer voor meer informatie deze link


Antwoord 3, autoriteit 28%

Ik geloof dat je het resultaat in kaart moet brengen voordat je je erop abonneert. Je configureert het als volgt:

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

Antwoord 4, autoriteit 12%

Als je net als ik bent, en starend naar je hoekige/ionische typoscript, dat eruitziet als…

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

En terwijl je opties instelt, maar niet kunt bedenken waarom ze nergens zijn..

Nou.. als je net als ik was en deze postbegon met een kopie/plak van een get, dan…

Wijzigen in:

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

Antwoord 5, autoriteit 6%

Ik had hetzelfde probleem. Dit is mijn oplossing met behulp van hoekdocumentatie en 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));
}); }}

Antwoord 6, autoriteit 3%

Hier is het gedetailleerde antwoord op de vraag:

Geef gegevens door aan de HTTP-header vanaf de hoekige kant (Let op: ik ben
met behulp van Angular4.0+ in de applicatie).

Er is meer dan één manier waarop we gegevens kunnen doorgeven aan de headers.
De syntaxis is anders, maar betekent allemaal hetzelfde.

// 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)

In de oproep vindt u het veld dat als kop is doorgegeven, zoals weergegeven in de onderstaande afbeelding:
voer hier de afbeeldingsbeschrijving in

Toch, als u te maken krijgt met problemen zoals.. (Mogelijk moet u de backend/WebAPI-kant wijzigen)

  • Reactie op preflight-verzoek komt niet door de toegangscontrole: Nee
    ”Access-Control-Allow-Origin” header is aanwezig op de gevraagde resource. Oorsprong ”http://localhost:4200” is daarom niet toegestaan
    toegang

  • Reactie voor preflight heeft geen HTTP ok-status.

Vind mijn gedetailleerde antwoord op https://stackoverflow.com/a/52620468/3454221

Other episodes