Angular2：Angular-http RequestOptions混淆

Question

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

Answer 1

事实证明，这是后端的CORS问题。