Angular 4: Senden Sie benutzerdefinierte Header mit HTTP-Anforderungen

In Angular 4 kann ich benutzerdefinierte Header mit HTTP-Anforderungen senden.Angular 4: Senden Sie benutzerdefinierte Header mit HTTP-Anforderungen

Ich habe versucht, Header mit folgenden Code zu senden:

let response = this.http.post(environment.serverUrl + url, data, this.getHeaders()) 
     .map((response: Response) => response.json()) 
     .catch(this.handleError); 

private getHeaders(): RequestOptions { 
    let reqOp = new RequestOptions(); 

    let headers = new Headers(); 
    headers.append('Accept', 'application/json'); 
    headers.append('Access-Control-Allow-Origin', '*'); 
    headers.append('Access-Control-Allow-Headers', '*'); 

    reqOp.headers = headers; 

    return reqOp; 
    }

noch die Header nicht auf meine Anfrage Header anhängen. Wenn ich den Anruf in "Netzwerk" von Chrome überprüfe, kann ich die benutzerdefinierten Header nicht sehen.

Accept:*/* 
Accept-Encoding:gzip, deflate 
Accept-Language:en-GB,en-US;q=0.8,en;q=0.6 
Access-Control-Request-Headers:access-control-allow-headers,access-control-allow-origin,content-type 
Access-Control-Request-Method:POST 
Connection:keep-alive 
Host:10.xxx.xxx.xxx:3300 
Origin:http://localhost:4200 
Referer:http://localhost:4200/ 
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36

Irgendwelche Hilfe, um das zu lösen? Bitte beachten Sie, dass ich HttpClient nicht von '@ angular/common/http' verwende;

Quelle

2017-08-31 Suvonkar

Mögliche Duplikat [Angular \ [4.3 \] Httpclient nicht Header sendet] (https://stackoverflow.com/questions/45286764/angular-4-3-httpclient-doesnt-send-header) –

Entfernen Sie das 'headers.append ('Access-Control-Allow-Origin', '*'); headers.append ('Access-Control-Allow-Headers', '*') von Ihrer Frontend-Anfrage. Dies sind streng genommen nur * response * -Header, die Server als Reaktion auf Anfragen zurücksenden. Der einzige Effekt, den das Hinzufügen zu einer Anfrage hat, ist, dass der Browser automatisch eine CORS-Preflight-OPTIONS-Anfrage auslöst, bevor er die POST-Anfrage von Ihrem Code sendet. Weitere Informationen finden Sie unter https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests. – sideshowbarker

Die Header-Liste, die Sie aus dem Netzwerkbereich von Devtools erhalten haben, sind Header für eine Preflight-OPTIONS-Anfrage. Die benutzerdefinierten Header, die Sie der Anfrage hinzugefügt haben, sind nicht vorhanden, da der Preflight das Ziel ist, den Server, an den Sie die Anfrage senden möchten, zuerst an & den Server zu kontaktieren, wenn er Cross-Origin-Anfragen erhält, die diese enthalten Kopfzeilen. Wenn der Server so konfiguriert ist, dass diese Header zulässig sind, sendet er eine Antwort, die dem Browser mitteilt, dass er in Ordnung ist. Erst dann sendet der Browser den POST. Aber wenn der Server sagt, es ist nicht OK, das Preflight schlägt fehl und der Browser versucht nie den POST – sideshowbarker

Tun Sie dies. Wenn mehr Header benötigt werden, fügen Sie sie einfach zum Header-Array hinzu.

apiUrl = 'api/url' 
myFunction(data) { 
    let headers = new Headers({'Content-Type':'application/json'}); 
    let options = new RequestOptions({headers: headers}); 

    return this.http.post(this.apiUrl, JSON.stringify(data), options).map((response: Response) => { 
    return response.json() 
    }) 
}

Quelle

2017-08-31 09:56:58

Immer noch kein Glück. Eine Beobachtung im benutzerdefinierten Chrome-Header ist das Hinzufügen von "Access-Control-Request-Header: Zugriffssteuerung-Zulassen-Ursprung, Inhaltstyp". – Suvonkar

Angular 4: Senden Sie benutzerdefinierte Header mit HTTP-Anforderungen

Antwort

Verwandte Themen