0

I am working on a very basic angular2 web app and having some issues with http headers...

I have the following function:

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

When I omit the hd.append('Content-Type', 'application/json') statement from the headers I actually get a response from the server but it then complains about the payload being in raw format when it should be a json. When I add the 'Content-Type', 'application/json' header it doesn't work at all and I get a "failed to load resource: CONNECTION_RESET" error in my crhome console... When using a Rest Client I am able to do the post request with the above header with no issues so i'm lost as to why this happens... I have to add this header for another put request in my app and getting the same results.

When I look under the chrome dev tools networking tab under headers when Omitting the header I see the following headers under Request Headers:

Request headers: Accept: application/json, text/plain, / Accept-Encoding: gzip, deflate, sdch Accept-Language: en-US,en;q=0.8 Connection: keep-alive Host: 10.60.160.34 content-type: text/plain Origin: http://localhost:4200 Referer: http://localhost:4200/settings 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

When I add the header I get the following under Request Headers in chrome dev tools:

Provisional headers are shown Access-Control-Request-Headers: content-type Access-Control-Request-Method: GET Origin: http://localhost:4200 Referer: http://localhost:4200/settings 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

So I don't even see my application/json in the headers when adding it? Any idea why this would happen/what I could do to fix it?

update: from chrome://net-internals I see the following:

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)
Improve this question
11
  • GET request normaly do not use Content-Type headers but an Accept header. Are you sure that you need to use the Content-Type header here? Commented Jan 13, 2017 at 12:37
  • Your code looks fine on the surface. However, it seems you might be running into CORS issues. Is the second request in your question actually a GET or is it an OPTIONS request maybe? Commented Jan 13, 2017 at 12:54
  • @MikeOne The second request that's not added to this question where I started to run into this issue was a Post. This ping request is a get though... I tried here to replicate the issue i'm having with the Post request in this get request to see if it behaves the same way (which it does... Commented Jan 13, 2017 at 12:59
  • When I do the Post request where I initially had this issue without adding this header I actually get a response from the server but When I add the header I don't get anything... it's like the request is blocked with the header Commented Jan 13, 2017 at 13:01
  • Just to make sure. You might tell it to do a POST (or GET), but if there are CORS issues (i.e. cross-domain request of certain types) - the browser itself first does a preflight OPTIONS request (which might not contain your custom set headers). Setting 'Content-type' on a CORS request causes the request to go from a 'simple' request to a 'complicated' request (triggering the preflight OPTIONS). You might be looking at this OPTIONS request instead of the actual request you are expecting. Hence the question. Commented Jan 13, 2017 at 13:11

2 Answers 2

Reset to default
1

You code looks fine on the surface. However, it seems you might mbe running into CORS issues. Is the second request in your question actually a GET or is it an OPTIONS request maybe?

Just to make sure. You might tell it to do a POST (or GET), but if there are CORS issues (i.e. cross-domain request of certain types) - the browser itself first does a preflight OPTIONS request (which might not contain your custom set headers). Setting 'Content-type' on a CORS request causes the request to go from a 'simple' request to a 'complicated' request (triggering the preflight OPTIONS). You might be looking at this OPTIONS request instead of the actual request you are expecting. Hence the question.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks again @MikeOne. So if i'm understanding this correctly the get requests worked before even though it was cross domain because it didn't trigger the preflight headers as I didn't add a content-type header to the request?
Indeed! That was probably the reason.
0

You need to put the details in the constructor as an object before http

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

1 Comment

I initially did it like that and got the exact same error which is why I tried it this way...

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.