使用 HttpClient 在点击发布请求时触发的两个调用

本文介绍了使用 HttpClient 在点击发布请求时触发的两个调用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

在代码中添加标头后发生重复调用.找到图像以查看呼叫发生了两次.

auth-interceptor.ts

导出类AuthInterceptor实现HttpInterceptor{

intercept(req: HttpRequest
参考此处.
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
 解决方案 
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.

                        
这篇关于使用 HttpClient 在点击发布请求时触发的两个调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！