Angular/Typescript: Interceptor makes the browser sent an additional OPTIONS http request

user_5589918 0
Viewed 48

I am using an interceptor in order to add a JWT token to each request sent to the backend as described here. The way I include the interceptor in the app.module.ts file is

providers: [
    ...
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
]

When I examine the network tab on my browser I see an additional OPTIONS request instead of the GET request I was initially sending.

enter image description here

If I don't use the interceptor, the OPTIONS request does not get sent. Why is this happening, and can I keep the interceptor but get rid of the additional OPTIONS request?

angular-http-interceptors angular typescript http
2 Answers

That's not the interceptor that's doing this. It's called CORS for Cross-Origin Resource Sharing.

Everybrowser is sending a OPTIONS request to domains that are different that the one hosting the page.

user_8841230

Turns out as mentioned in this answer

As soon as you add a custom header, in my case Authorization or do anything that causes it to no longer be a simple request it, by default, sends the preflight request with the OPTIONS method instead of, in my case, POST.

It is also mentioned in more detail here.

So you can't avoid the additional request if you add custom headers to it.

user_55899180
Related