使用HttpClient点击发布请求触发两个调用[重复]答案

【问题标题】：Two calls triggering on click of post request using HttpClient [duplicate]使用HttpClient点击发布请求触发两个调用[重复]
【发布时间】：2018-04-12 11:55:26
【问题描述】：

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

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

【问题讨论】：

向我们展示更多日志。这可能是因为第一次调用只是方法 OPTIONS。这个是正常的。您的浏览器在发送真实请求之前检查请求 URL
@WitoldTkaczyk：我添加了两个通话记录图像.. 请从上面找到那些。并评论为什么会发生
是的，我的回答是对的
但如果不添加标题，则不会发生此重复调用。仅在添加标题后才会发生这种情况
我知道副本说 angularjs 但问题是一样的，@WitoldTkaczyk 是对的。如果你愿意，我可以重新打开它。

标签： angular angularjs-directive angular-ui-router

【解决方案1】：

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

它包括两个阶段：

浏览器使用与目标请求相同的 URL 执行 OPTIONS 请求，以检查它是否有权执行该请求。此OPTIONS 请求 返回标明可以对 URL 执行的操作的标头。
如果权限匹配，浏览器执行请求。

Reference here.

【讨论】：

你的答案和我的有什么不同？
您的回答是正确的，我回答尝试通过一些信息来增加价值，并且图像非常具有说明性：D

【解决方案2】：

第一次调用由Cross-Origin Resource Sharing (CORS)触发

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

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

请参阅有用的article 了解更多信息。

【讨论】：