2016-09-09 3 views
25

Wie fügen Sie Header zu Ihrer HTTP-Anfrage in Angular2 RC6 hinzu? Ich habe folgenden Code:http-Post - wie Autorisierungsheader senden?

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, ist, dass Winkel nicht Authorization-Header hinzufügen. Statt dessen in Aufforderung kann ich folgende zusätzliche Header sehen:

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

und sdch hinzugefügt in Accept-Encoding:

Accept-Encoding:gzip, deflate, sdch 

Unfornately gibt es keine Authorization-Header. Wie sollte ich es richtig hinzufügen?

Ganze Anfrage von meinem Code gesendet sieht wie folgt:

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 
+0

Haben Sie versucht, stattdessen eigene Anfrageoptionen anzugeben? http://StackOverflow.com/a/35047978/4102561 – Supamiu

+0

@Supamiu Unfornessly diese Lösung funktioniert nicht. Ich habe versucht: this.http._defaultOptions.headers.set ('Authorization', 'Basic YW5ndWxhci13YXJlaG91c2Utc2VydmljZXM6MTIzNDU2'); Und haben die gleichen Ergebnisse –

+1

Die Anfrage, die Sie in Ihrer Frage zeigen, ist die 'OPTIONS' Preflight-Anfrage, können Sie bitte die POST-Anfrage hinzufügen (sollte direkt nach diesem in Ihrem Netzwerk Tab) – Supamiu

Antwort

18

Ok mehr überprüfen. Ich habe ein Problem gefunden.

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

Grund, warum ich meine Anfrage erfolgreich ausführen konnte, war, dass meine Server-App die OPTIONS-Anfrage nicht korrekt bearbeitet hat.

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

Mit Hilfe dieser Antwort: Standalone Spring OAuth2 JWT Authorization Server + CORS

ich richtige Filter auf meiner serverseitige Anwendung implementiert.

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

+6

Es sendet 'OPTIONS' als Preflight-Anfrage und dann die' POST 'Wenn alles gut geht, ersetzt es' POST' nicht durch 'OPTIONS'. – Oskar

5

Ich glaube, Sie brauchen, um das Ergebnis zuordnen, bevor Sie ihn 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() 
    ); 
    } 
+0

Der Punkt der Frage ist nicht, wie man mit http ** -Antwort **, aber wie man richtigen Header ** Anfrage ** hinzufügen. Sicher habe ich Ihren Vorschlag überprüft - es funktioniert nicht, die gesendeten Header sind immer noch gleich. –

+0

Es funktioniert in meiner App.Ich benutze es die ganze Zeit. –

+0

Welche Version von eckigen hast du? –

12

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

für dieses link

Verwandte Themen