0

I'm busy with my first Angular web app, I have to do a post and I'm very unsure how to add the headers to the request... As far as I've read online the way to do this is by using angular-http's RequestOptions. I see many examples online where RequestOptions is used in this way:

My code:

let hdrs = new Headers({ 'Content-Type': 'application/json' });
  let options = new RequestOptions({headers: hdrs});
        return this.http.post(this.API_URL + "StockTake/AddToStockTake", JSON.stringify(stockTakeModel), options)
        .map((res: Response) => res.json())
        .catch((error: any) => Observable.throw(error.json().error || 'server error'));
  }

When I do this I always get the same error in my chrome console,

Chrome error:

  Failed to load resource: net::ERR_CONNECTION_RESET

In Firefox the error is:

[WDS] Disconnected!
main.bundle.js:51863:10
log
http://localhost:4200/main.bundle.js:51863:10
onSocketMsg.close
http://localhost:4200/main.bundle.js:51912:3
socket/sock.onclose
http://localhost:4200/main.bundle.js:85690:4
EventTarget.prototype.dispatchEvent
http://localhost:4200/main.bundle.js:51108:5
SockJS.prototype._close/<
http://localhost:4200/main.bundle.js:83235:5
Zone$1</ZoneDelegate</ZoneDelegate.prototype.invokeTask
http://localhost:4200/main.bundle.js:86029:21
Zone$1</Zone</Zone.prototype.runTask
http://localhost:4200/main.bundle.js:85918:28
ZoneTask/this.invoke
http://localhost:4200/main.bundle.js:86099:28
scheduleTask/data.args[0]

It's been suggested to me that the third option of the http post method takes a RequestOptionsArgs type and not a RequestOptions type... If so how would that look in this instance? I've also tried { headers: hdrs } instead of options as the third argument but still getting the same error...

I'm not sure if I'm looking in the right place for my issue, when I look under the request headers of the request in Chrome dev tools Networking tab it lists the following:

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

I can post to the API using the Insomnia Rest client so I know the issue isn't API related...

the Online places I've seen RequestOptions used the way I do use it:

https://scotch.io/tutorials/angular-2-http-requests-with-observables

https://angular.io/docs/ts/latest/guide/server-communication.html

2
  • let Options should be let options (lowercase O) Commented Jan 13, 2017 at 8:00
  • @Günter Zöchbauer that was just a typo in my question. Sorry will fix that now, it's not like that in my actual code Commented Jan 13, 2017 at 8:03

1 Answer 1

1

This turned out to be a CORS issue with the backend...

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

1 Comment

I had some cors issues being shown in chrome, but not in firefox for example...agree that this was pretty confusing :D

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.