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

Question

在代码中添加标题后，重复调用正在发生。找到图像以查看两次发生的呼叫。

auth-interceptor.ts

导出类AuthInterceptor实现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

第一个电话是由Cross-Origin Resource Sharing (CORS)

触发的

  

首先发送一个OPTION请求，以检查发送请求的域是否与服务器中的域相同。

     

请注意，如果您使用身份验证标头向请求添加身份验证，则简单请求会自动成为预检请求。

有关详细信息，另请参阅有用的article。

Answer 2

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

它包括两个阶段：

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

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



Reference here