it-swarm.com.de

http post - wie wird der Authorization Header verschickt?

Wie können Sie Ihrer http-Anfrage in Angular2 RC6 Header hinzufügen? Ich habe folgenden Code erhalten:

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
}

Das Problem ist, dass angular Authorization Header nicht hinzufügt. Stattdessen kann ich auf Anfrage die folgenden zusätzlichen Header sehen:

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

und sdch in Accept-Encoding hinzugefügt:

Accept-Encoding:gzip, deflate, sdch

Leider gibt es keinen Authorization-Header. Wie soll ich es richtig hinzufügen?

Die gesamte von meinem Code gesendete Anfrage sieht wie folgt aus:

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

Okay. Ich habe ein Problem gefunden.

Es war nicht auf der Angular Seite. Um ehrlich zu sein, gab es überhaupt kein Problem.

Der Grund, warum ich meine Anfrage nicht erfolgreich ausführen konnte, war, dass meine Server-App die OPTIONS-Anfrage nicht richtig handhabte.

Warum OPTIONEN, nicht POST? Meine Server-App befindet sich auf einem anderen Host und dann im Frontend. Wegen CORS konvertierte mein Browser POST nach OPTION: http://restlet.com/blog/2015/12/15/understanding-and-using-cors/

Mit Hilfe dieser Antwort: Standalone-Spring-OAuth2-JWT-Autorisierungsserver + CORS

Ich habe auf meiner serverseitigen App einen geeigneten Filter implementiert.

Vielen Dank an @Supamiu - die Person, die mich gefingert hat, dass ich überhaupt nicht POST sende.

26
Maciej Treder

sie benötigen 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);

weitere Informationen finden Sie unter Link

15
kTn

Ich glaube, Sie müssen das Ergebnis zuordnen, bevor Sie es abonnieren. Sie konfigurieren es so:

  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

Wenn Sie wie ich sind und Ihren eckigen/ionischen TypeScript in der Hauptrolle spielen, dann sieht das so aus.

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

Und während Sie Optionen festlegen, aber nicht herauszufinden scheinen, warum sie nirgendwo sind.

Nun ... wenn du wie ich wärst und dieses post von einem Kopieren/Einfügen eines get gestartet hast, dann ...

Ändern:

  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

Ich hatte das gleiche Problem. Dies ist meine Lösung mit angular Dokumentation und 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

Hier ist die ausführliche Antwort auf die Frage:

Übergeben Sie Daten von der Seite Angular) in den HTTP-Header (Bitte beachten Sie, dass ich Angular4.0 + in der Anwendung verwende).

Es gibt mehr als eine Möglichkeit, Daten in die Header zu übertragen. Die Syntax ist unterschiedlich, aber alle bedeuten dasselbe.

// 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 der Aufforderung finden Sie das als Kopfzeile übergebene Feld wie in der folgenden Abbildung dargestellt: enter image description here

Dennoch, wenn Sie mit Problemen wie konfrontiert sind. (Möglicherweise müssen Sie die Backend-/WebAPI-Seite ändern.)

  • Die Antwort auf die Preflight-Anforderung besteht die Zugriffskontrollprüfung nicht: In der angeforderten Ressource ist kein '' Access-Control-Allow-Origin''-Header vorhanden. Origin '' http: // localhost: 42 '' ist daher kein Zugriff gestattet

  • Antwort für Preflight hat keinen HTTP-OK-Status.

Meine ausführliche Antwort finden Sie unter https://stackoverflow.com/a/52620468/3454221

0
Trilok Pathak