Reputation: 1770
I have the following code, which is executed upon the click of a button on the screen:
viewAlarm(id: string) {
return this.http.patch('http://localhost:9000/app/alarms/' + id + '/viewed', null)
.map(extractData)
.catch(handleError);
}
This does what I need it to do in terms of the app at least appearing to act normal. But when I look in the Network tab of the browser, I see that not only is this PATCH call made, but also a duplicate OPTIONS call. The OPTIONS never receives a response like the PATCH does, but I'm still not sure how I can remove this mysterious extra call to the server.
For example, if I click the button for alarm id 45, I'll see the following TWO requests in my Network tab:
PATCH http://localhost:9000/app/alarms/45/viewed
OPTIONS http://localhost:9000/app/alarms/45/viewed
I ensured that the function was indeed only getting hit once upon the click of the button, and I don't have any other functions that make calls to this endpoint. I can see that the extra call is getting received by the server as well.
Upvotes: 0
Views: 52
Reputation: 1770
Turns out nothing was wrong after all. Thanks to @Dummy for pointing me in the right direction.
Apparently, the browser sending two requests is totally normal. The first OPTIONS request is simply to make sure you can actually do what you're trying to do with the endpoint.
From an article on the CORS request cycle: "The browser first executes an OPTIONS request with the same URL as the target request to check that it has the rights to execute the request. This OPTIONS request returns headers that identify what is possible to do for the URL. If rights match, the browser executes the request."
Upvotes: 1