Two calls triggering on click of post request using HttpClient

Question

After adding headers inside code duplicate call is happening. find the image to see the call happening twice.

auth-interceptor.ts

export class AuthInterceptor implements HttpInterceptor {

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    const clonedRequest = req.clone({
        headers: req.headers.set('X-CustomAuthHeader', 'some-auth-token')
    });

    console.log("new headers", clonedRequest.headers.keys());

    return next.handle(clonedRequest);
}

}

Please fine calls log image here..

call log 1

call log 2

Show us more logs. This is probably because the first call is just method OPTIONS. this is normal. Your browser checking request URL before sending real request — Witold Tkaczyk, Oct 31 '17 at 10:45
@WitoldTkaczyk: i have added two call log images .. please find those from above. and comment why its happening — Shyam Kumar, Oct 31 '17 at 10:57
but this duplicate call is not happening if am not adding headers..this occurs only after adding headers — Shyam Kumar, Oct 31 '17 at 11:26
because that is how corse works. Read this http://restlet.com/company/blog/2015/12/15/understanding-and-using-cors/ — Witold Tkaczyk, Oct 31 '17 at 11:31
I know the duplicate says angularjs but the problem is the same and @WitoldTkaczyk is right. I can re-open it if you want. — eko, Oct 31 '17 at 11:45
@WitoldTkaczyk options call is not triggering if call is from same domain. why is that happening? — Shyam Kumar, Nov 07 '17 at 11:19

score 1 · Accepted Answer · answered Oct 31 '17 at 11:42

1

This type of request is called Preflighted requests that corresponds to a negotiation between the caller and the Web application based on HTTP headers.

It consists of two phases:

The browser 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.

Reference here.

answered Oct 31 '17 at 11:42

JuanDM

1,250
10
24

How does your answer differ from mine? – Witold Tkaczyk Oct 31 '17 at 11:47
Your answer is correct, i answered trying to add value with a little bit of information and the image is very illustrative :D – JuanDM Oct 31 '17 at 11:58

Witold Tkaczyk · Answer 2 · 2017-10-31T11:33:55.177

0

The first call is triggered by Cross-Origin Resource Sharing (CORS)

It sends first an OPTION request to check if the domain, from which the request is sent, is the same as the one from the server.

Notice that if you add authentication to the request using the Authentication header, simple requests automatically become preflighted ones.

See also helpful article for more information.

edited Oct 31 '17 at 11:33

answered Oct 31 '17 at 10:49

Witold Tkaczyk

695
8
18

Two calls triggering on click of post request using HttpClient

2 Answers2

Linked

Related