使用标头时，Angular $http 执行了两次

Posted 2023-03-04

【中文标题】使用标头时，Angular $http 执行了两次

【英文标题】：Angular $http executed twice when using headers

【发布时间】：2017-05-13 19:06:07

【问题描述】：

我正在开发一个离子项目，并且在每个 POST 和 GET 请求中使用标头参数。然而，当我在 android 手机上测试项目并监控通过我的 android 设备进入我的服务器的所有请求时，没有任何问题。但是当我部署我的 ionic 项目并在我的网络浏览器（Chrome 网络浏览器）中测试它时，我看到每个请求都被执行了两次，（一个没有标头参数，当我使用 POST 方法时没有输入，第二个是全部参数）。 如果没有标头参数每次都忽略请求，我已经在我的服务器中解决了它。如何防止重复执行 $http（POST 和 GET）？ 这些参数是我在 angular.config js 文件中设置的。

$httpProvider.defaults.headers.common['Accept'] = 'application/json; q=0.01';
$httpProvider.defaults.headers.common['Authorization-Token'] = value;

我的 php 服务以

开头

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Content-Type, Authorization-Token");
header('Access-Control-Max-Age: 60');
header('Access-Control-Allow-Methods: ["GET","POST"]');
header("Content-Type: application/json; charset=UTF-8");

【问题讨论】：

在预检请求期间听起来像 CORS。第一次调用 OPTIONS 方法，第二次调用 POST 或 GET 方法

需要查看您进行实际调用的方法

我认为来自服务端的错误

【参考方案1】：

听起来确实像一个 OPTION 调用。

应该这样做，并且不携带任何有效负载，它只是在执行实际调用（post/get/whatever）之前与服务器检查允许对资源进行哪些操作。

检查这个类似问题的答案：Angular 2 HTTP POST does an OPTIONS call

【讨论】：

谢谢，如果请求是飞行前请求，我可以提前退出我的网络服务吗？类似于： if ($request_type=="pre-flight") return;

绝对可以。根据您使用服务器端的框架，实现当然会有所不同。我更喜欢 Laravel，用 $request->method() == 'options' 在中间件中捕获它。或者用普通的 PHP $_SERVER['REQUEST_METHOD'] == 'OPTIONS'。需要明确的是，options 调用不仅仅是为了让开发人员添加更多捕获，并且您可以或应该返回一些标头来定义应用程序允许的操作。基础知识：en.wikipedia.org/wiki/Cross-origin_resource_sharing，以及扩展解释html5rocks.com/en/tutorials/cors

非常感谢，它可以正常工作 :) 绝对是最好的答案！

【参考方案2】：

第一个请求是预检。 这是浏览器机制的一部分。 你无法避免它。

【参考方案3】：

这一切都取决于浏览器如何管理 CORS。当在 javascript 中发出非“简单”的跨域请求（即 GET 请求）时，浏览器会自动向指定的 URL/URI 发出 HTTP OPTIONS 请求，称为“pre-flight”请求或“promise” .只要远程源返回 200 的 HTTP 状态代码以及有关它将在响应标头中接受的内容的相关详细信息，那么浏览器将继续执行原始 JavaScript 调用

请看here和here

【讨论】：

谢谢卢加斯。我可以通过检查请求的类型在我的 Web 服务中阻止它吗？所以，如果它是飞行前请求，我不希望我的 Web 服务执行其余代码。我的意思是类似（提前退出）： if ($request_type=="pre-flight") return; // 不再执行

我也在工作中处理这个问题，并且一直在寻找可以在请求开始之前检查的东西，但这里没有结果......如果我能找到更好的东西，我会马上告诉你... :\ @AhmedK