CODEWITHSUNDEEP
angulartypescripthttpangular-http-interceptors
Da Mike
Da Mike

Reputation: 463

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

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?

Upvotes: 1

Views: 358

Answers (2)

Da Mike
Da Mike

Reputation: 463

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.

Upvotes: 1

Matthieu Riegler
Matthieu Riegler

Reputation: 55846

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.

Upvotes: 2

Related Questions