使用HttpClient单击发帖请求时触发两个调用 [英] Two calls triggering on click of post request using HttpClient

问题描述

在代码内添加标头后，发生重复调用.找到图片以查看通话发生了两次.

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

auth-interceptor.ts

导出类AuthInterceptor实现HttpInterceptor {

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);
}

}

请在此处精细调用日志图像..

通话记录1

通话记录2

推荐答案

这种类型的请求称为 Preflighted请求，它对应于调用方和Web应用程序之间基于HTTP标头的协商.

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

它包括两个阶段:

1. 浏览器使用与目标请求相同的URL执行 OPTIONS请求，以检查其是否有权执行该请求.此 OPTIONS请求返回标头，该标头标识了可以对URL进行的操作.

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.

如果权限匹配，浏览器将执行请求.

If rights match, the browser executes the request.

参考.

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