Two calls triggering on click of post request usin

Question

This question already has an answer here:

• duplicate ajax calls in angularjs 2 answers

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

Answer 1

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.

Answer 2

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:

1. 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.

2. If rights match, the browser executes the request.

Reference here.