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

Issue

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.

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?

Solution

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.

Answered By - Da Mike