Angular2: Winkel-HTTP-Header sehr seltsames Verhalten

Question

ich auf einen sehr grundlegenden angular2 Web-App arbeite und einige Probleme mit HTTP-Header mit ...

Ich habe die folgende Funktion:

postStockTake(stockTakeModel: StockTakeModel) : Observable<Response> { 
let body = JSON.stringify(stockTakeModel); 
     let hd = new Headers(); 
     hd.append('Content-Type', 'application/json');  
     return this.http.post(ApiUrl, body, {headers: hd}) 
     .map((res: Response) => res.json()) 
     .catch((error: any) => Observable.throw(error.json().error || 'server error')); 
    } 

Wenn Ich lasse die Anweisung hd.append ('Content-Type', 'application/json') aus den Headern weg. Ich bekomme tatsächlich eine Antwort vom Server, aber sie beschwert sich darüber, dass die Payload im rohen Format ist, wenn es ein json sein soll. Wenn ich den 'Content-Type', 'application/json' Header hinzufüge, funktioniert es überhaupt nicht und ich erhalte den Fehler "load resource: CONNECTION_RESET" in meiner crhome Konsole ... Wenn ich einen Rest Client verwende Ich bin in der Lage, die Post-Anfrage mit dem oben genannten Header ohne Probleme zu tun, also bin ich verloren, warum dies passiert ... Ich muss diesen Header für eine andere Put-Anfrage in meiner App hinzufügen und die gleichen Ergebnisse erhalten.

Wenn ich mich unter den Chrom-Entwickler-Tool unter dem Registerkarte Header Vernetzung, wenn die Header Weglassen ich die folgenden Header unter Anfrageheaders siehe:

Anfrage Header: Accept: application/json, text/plain, / Accept-Encoding: gzip, deflate, sdch Accept-Language: en-US, en; q = 0,8 Verbindung: Keep-alive- Host: 10.60.160.34 Content-Type: text/plain Herkunft: http://localhost:4200 Referer : http://localhost:4200/settings Benutzer -Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537,36 (KHTML, wie Gecko) Chrom/55.0.2883.87 Safari/537,36

Wenn ich den Header ich folgende unter Anforderungsheader in Chrom dev Tool erhalten hinzufügen:

Provisional Header angezeigt Zugang -Kontrolle-Request-Header: Content-Type Access-Control-Request-Methode: GET Herkunft: http://localhost:4200 Referer: http://localhost:4200/settings User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537,36 (KHTML , wie Gecko) Chrome/55.0.2883.87 Safari/537.36

Also ich d sehen Sie nicht einmal meine Anwendung/JSON in den Kopfzeilen, wenn Sie es hinzufügen? Irgendeine Idee, warum das passieren würde/was ich tun könnte, um es zu beheben?

Update: von chrome: // net-internals Ich sehe folgendes:

http://10.60.160.34/BRMServices/WebEnquiry/StockTake/AddToStockTake 
Start Time: 2017-01-13 14:44:30.800 
t=19711 [st=0] +REQUEST_ALIVE [dt=3] 
t=19711 [st=0] URL_REQUEST_DELEGATE [dt=0] 
t=19711 [st=0] +URL_REQUEST_START_JOB [dt=3] 
        --> load_flags = 34624 (DO_NOT_SAVE_COOKIES | DO_NOT_SEND_AUTH_DATA | DO_NOT_SEND_COOKIES | MAYBE_USER_GESTURE | VERIFY_EV_CERT) 
        --> method = "OPTIONS" 
        --> priority = "MEDIUM" 
        --> url = "http://10.60.160.34/BRMServices/WebEnquiry/StockTake/AddToStockTake" 
t=19711 [st=0]  URL_REQUEST_DELEGATE [dt=0] 
t=19711 [st=0]  HTTP_CACHE_GET_BACKEND [dt=0] 
t=19711 [st=0]  +HTTP_STREAM_REQUEST [dt=1] 
t=19711 [st=0]  HTTP_STREAM_REQUEST_STARTED_JOB 

--> source_dependency = 6474 (HTTP_STREAM_JOB) 

t=19712 [st=1]  HTTP_STREAM_REQUEST_BOUND_TO_JOB 

--> source_dependency = 6474 (HTTP_STREAM_JOB) 

t=19712 [st=1]  -HTTP_STREAM_REQUEST 
t=19712 [st=1]  +HTTP_TRANSACTION_SEND_REQUEST [dt=0] 
t=19712 [st=1]  HTTP_TRANSACTION_SEND_REQUEST_HEADERS 
         --> OPTIONS /BRMServices/WebEnquiry/StockTake/AddToStockTake HTTP/1.1 
          Host: 10.60.160.34 
          Connection: keep-alive 
          Access-Control-Request-Method: POST 
          Origin: http://localhost:4200 
          User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36 
          Access-Control-Request-Headers: content-type 
          Accept: */* 
          Referer: http://localhost:4200/stockTake 
          Accept-Encoding: gzip, deflate, sdch 
          Accept-Language: en-US,en;q=0.8 
t=19712 [st=1]  -HTTP_TRANSACTION_SEND_REQUEST 
t=19712 [st=1]  +HTTP_TRANSACTION_READ_HEADERS [dt=2] 
t=19712 [st=1]  HTTP_STREAM_PARSER_READ_HEADERS [dt=2] 
         --> net_error = -101 (ERR_CONNECTION_RESET) 
t=19714 [st=3]  -HTTP_TRANSACTION_READ_HEADERS 
        --> net_error = -101 (ERR_CONNECTION_RESET) 
t=19714 [st=3] -URL_REQUEST_START_JOB 
        --> net_error = -101 (ERR_CONNECTION_RESET) 
t=19714 [st=3] URL_REQUEST_DELEGATE [dt=0] 
t=19714 [st=3] -REQUEST_ALIVE 
       --> net_error = -101 (ERR_CONNECTION_RESET) 

Answer 1

Sie Code sieht fein auf der Oberfläche. Es scheint jedoch, Sie könnten in CORS Probleme auftreten. Ist die zweite Anfrage in Ihrer Frage eigentlich ein GET oder ist es vielleicht eine OPTIONS-Anfrage?

Nur um sicher zu gehen. Sie könnten es einem POST (oder GET) mitteilen, aber wenn es CORS-Probleme gibt (d. H. Domänenübergreifende Anfragen bestimmter Typen), führt der Browser selbst zuerst eine Preflight-OPTIONS-Anfrage durch (die Ihre benutzerdefinierten Set-Header möglicherweise nicht enthält). Wenn Sie bei einer CORS-Anfrage 'Content-Type' einstellen, wird die Anfrage von einer 'einfachen' Anfrage zu einer 'komplizierten' Anfrage weitergeleitet (die Preflight-OPTIONEN werden ausgelöst). Möglicherweise sehen Sie sich diese OPTIONS-Anfrage anstelle der tatsächlichen Anfrage an, die Sie erwarten. Daher die Frage.

Answer 2

Sie müssen vor http die Details im Konstruktor als Objekt setzen

hd = new Header({"Content-Type" : "application/json"});