在 Chrome 开发者工具中，资源的 status=canceled 是什么意思？

我们解决了一个类似的问题，Chrome 取消了在框架或 iframe 中加载内容的请求，但只是间歇性的，而且它似乎取决于计算机和/或互联网连接的速度。

这些信息已经过时了几个月，但我从头开始构建 Chromium，挖掘源代码以找到所有可以取消请求的地方，并在所有这些地方设置断点以进行调试。从内存中，Chrome 会取消请求的唯一地方：

导致发出请求的 DOM 元素被删除（即正在加载 IMG，但在加载发生之前，您删除了 IMG 节点）

你做了一些不必要的加载数据的事情。 （即您开始加载 iframe，然后更改 src 或覆盖内容）

有很多请求发往同一台服务器，早期请求的网络问题表明后续请求无法正常工作（DNS 查找错误，早期（相同）请求导致例如 HTTP 400 错误代码等）

在我们的例子中，我们最终将其追溯到一个试图将 HTML 附加到另一个帧的帧，这有时甚至发生在目标帧加载之前。一旦你触摸了 iframe 的内容，它就不能再将资源加载到其中（它怎么知道把它放在哪里？）所以它取消了请求。

---

status=canceled 也可能发生在 JavaScript 事件的 ajax 请求上：

<script>
  $("#call_ajax").on("click", function(event){
     $.ajax({
        ...    
     });
  });
</script>

<button id="call_ajax">call</button> 

该事件成功发送请求，但随后被取消（但由服务器处理）。原因是，元素在点击事件上提交表单，无论您是否在同一个点击事件上发出任何 ajax 请求。

为了防止请求被取消，必须调用 JavaScript event.preventDefault();：

<script>
  $("#call_ajax").on("click", function(event){
     event.preventDefault();
     $.ajax({
        ...    
     });
  });
</script>

---

注意：确保您没有任何包装表单元素。

我有一个类似的问题，我的带有 onclick={} 的按钮被包装在一个表单元素中。单击按钮时，表单也被提交，这一切都搞砸了......

---

另一件需要注意的事情可能是 AdBlock 扩展，或一般的扩展。

但是“很多”人都有 AdBlock....

要排除扩展程序，请在隐身模式中打开一个新选项卡，确保您要测试的扩展程序的“允许隐身模式已关闭”。

---

就我而言，我发现是jquery全局超时设置，一个jquery插件设置全局超时为500ms，这样当请求超过500ms时，chrome就会取消请求。

---

您可能需要检查“X-Frame-Options”标头标签。如果将其设置为 SAMEORIGIN 或 DENY，则 Chrome（和其他浏览器）将根据 spec 取消 iFrame 插入。

另请注意，某些浏览器支持 ALLOW-FROM 设置，但 Chrome 不支持。

要解决此问题，您需要删除“X-Frame-Options”标头标签。这可能会让您对 clickjacking attacks 持开放态度，因此您需要确定风险是什么以及如何减轻风险。

---

这是发生在我身上的事情：服务器为 302 重定向返回了格式错误的“位置”标头。当然，Chrome 没有告诉我这一点。我用firefox打开页面，马上就发现了问题。很高兴拥有多种工具:)

---

我们遇到 (canceled) 状态的另一个地方是特定的 TLS 证书配置错误。如果诸如 https://www.example.com 的站点配置错误，使得证书不包含 www. 但对 https://example.com 有效，则 chrome 将取消此请求并自动重定向到后一个站点。对于 Firefox，不是。

当前有效示例：https://www.pthree.org/

---

在 iframe 中不同域上的安全和非安全页面之间重定向时，我发生了取消的请求。重定向的请求在开发工具中显示为“已取消”请求。

我有一个带有 iframe 的页面，其中包含由我的支付网关托管的表单。提交 iframe 中的表单后，支付网关将重定向回我服务器上的 URL。重定向最近停止工作并最终成为“已取消”的请求。

似乎 Chrome（我使用的是 Windows 7 Chrome 30.0.1599.101）不再允许 iframe 中的重定向转到单独域上的非安全页面。为了解决这个问题，我只是确保 iframe 中的所有重定向请求始终发送到安全 URL。

当我创建一个只有 iframe 的更简单的测试页面时，控制台中有一个警告（我之前错过了或者可能没有出现）：

[Blocked] The page at https://mydomain.com/Payment/EnterDetails ran insecure content from http://mydomain.com/Payment/Success

在 PC、Mac 和 Android 上的 Chrome 中，重定向变成了取消的请求。我不知道它是特定于我的网站设置（SagePay Low Profile）还是 Chrome 中的某些内容发生了变化。

---

如果我使用指向本地主机的 Mobile Emulation，Chrome 版本 33.0.1750.154 m 会始终取消图像加载；特别是 User Agent 欺骗on（与仅屏幕设置相比）。

当我关闭用户代理欺骗时；图像请求没有被取消，我看到了图像。

我还是不明白为什么；在前一种情况下，请求被取消的请求标头（注意：显示临时标头）只有

接受

缓存控制

编译指示

推荐人

用户代理

在后一种情况下，所有这些加上其他人喜欢：

曲奇饼

联系

主持人

接受编码

接受语言

耸耸肩

---

当我通过 JavaScript 重定向时，我在 Chrome 中收到此错误：

<script>
    window.location.href = "devhost:88/somepage";
</script>

如您所见，我忘记了“http://”。我添加后，它起作用了。

---

如果你使用 axios 它可以帮助你

// change timeout delay: instance.defaults.timeout = 2500;

https://github.com/axios/axios#config-order-of-precedence

---

就我而言，我有一个带有点击事件的锚点，例如

<a href="" onclick="somemethod($index, hour, $event)">

在点击事件中，我有一些网络调用，Chrome 取消了请求。锚点有 href 和 "" 表示，它重新加载页面，同时它有点击事件，网络调用被取消。每当我用 void 替换 href 时

<a href="javascript:void(0)" onclick="somemethod($index, hour, $event)">

问题消失了！

---

这是我刚刚遇到的另一种请求被chrome取消的情况，上面的任何答案都没有涵盖。

简而言之，自签名证书在我的 Android 手机上不受信任。

详细信息我们处于开发/调试阶段。该 url 指向一个自签名主机。代码如下：

location.href = 'https://some.host.com/some/path'

Chrome 只是默默地取消了请求，没有给像我这样的 web 开发新手解决问题留下任何线索。一旦我使用安卓手机下载并安装了证书，问题就消失了。

---

我遇到了同样的问题，在我们的代码深处，我们有这个伪代码：

创建一个 iframe

加载 iframe 提交表单

秒后，移除 iframe

因此，当服务器响应时间超过 2 秒时，服务器正在写入响应的 iframe 被删除，但响应仍要写入，但没有 iframe 可写入，因此 chrome 取消了请求，因此为避免这种情况，我确保仅在响应结束后才删除 iframe，或者您可以将目标更改为“_blank”。因此，原因之一是：当您正在写入内容的资源（在我的情况下为 iframe）在您停止写入之前被删除或删除时，请求将被取消

---

当我在样式表中嵌入网络字体时，我嵌入了所有类型的字体以及 woff、woff2、ttf。最近我注意到当 woff2 存在时，Chrome 会取消对 ttf 和 woff 的请求。我现在使用 Chrome 版本 66.0.3359.181，但我不确定 Chrome 何时开始取消额外的字体类型。

---

我们在表单中有标签 <button> 时遇到了这个问题，它应该从 js 发送 ajax 请求。但是这个请求被取消了，因为浏览器会在任何点击表单内的 button 时自动发送表单。

所以如果你真的想在页面上使用 button 而不是常规的 div 或 span，并且你想发送表单 throw js - 你应该设置一个带有 preventDefault 函数的监听器。

例如

$('button').on('click', function(e){

    e.preventDefault();

    //do ajax
    $.ajax({

     ...
    });

})

---

如果您使用一些基于 Observable 的 HTTP 请求，例如 Angular (2+) 中内置的那些，那么当 observable 被取消时，HTTP 请求可以被取消（当您使用 RxJS 6 switchMap 运算符组合时很常见）流）。在大多数情况下，如果您希望请求完成，则使用 mergeMap 运算符就足够了。

---

我有两个 CSS 文件完全相同的东西，它们存储在我的主 css 文件夹之外的另一个文件夹中。我正在使用表达式引擎，发现问题出在我的 htaccess 文件中的规则中。我刚刚将该文件夹添加到我的条件之一中并修复了它。这是一个例子：

RewriteCond %{REQUEST_URI} !(images|css|js|new_folder|favicon.ico)

所以可能值得你检查你的 htaccess 文件是否有任何潜在的冲突

---

打电话给我时也发生了同样的事情。带有 $.js 的文件。 ajax，并发出ajax请求，我所做的就是正常调用。

---

在我的情况下，显示电子邮件客户端窗口的代码导致 Chrome 停止加载图像：

document.location.href = mailToLink;

将其移至 $(window).load(function () {...}) 而不是 $(function () {...}) 会有所帮助。

---

这可以帮助我在遗漏返回错误时遇到取消状态的任何人；在表单中提交。这导致 ajax 发送紧跟在提交操作之后，该操作覆盖了当前页面。代码如下所示，最后是重要的 return false。

$('form').submit(function() {

    $.validator.unobtrusive.parse($('form'));
    var data = $('form').serialize();
    data.__RequestVerificationToken = $('input[name=__RequestVerificationToken]').val();

    if ($('form').valid()) {
        $.ajax({
            url: this.action,
            type: 'POST',
            data: data,
            success: submitSuccess,
            fail: submitFailed
        });
    }
    return false;       //needed to stop default form submit action
});

希望对某人有所帮助。

---

对于来自 LoopbackJS 并尝试使用其图表示例中提供的自定义流方法的任何人。我在使用 PersistedModel 时遇到此错误，切换到基本 Model 解决了我的 eventsource 状态取消问题。

同样，这是专门针对回送 api 的。而且由于这是谷歌的最佳答案和顶级答案，我想我会把它放在答案的组合中。

---

对我来说，“取消”状态是因为该文件不存在。奇怪为什么 chrome 不显示 404。

---

对我来说，这就像一条错误的道路一样简单。我建议调试的第一步是查看是否可以独立于 ajax 等加载文件。

---

请求可能已被跟踪保护插件阻止。

---

加载 300 张图像作为背景图像时发生在我身上。我猜一旦第一个超时，它就会取消所有其余的，或者达到最大并发请求。需要执行一次 5 个

---

原因之一可能是代码中某处调用了 XMLHttpRequest.abort()，在这种情况下，请求将在 Chrome 开发者工具网络标签中具有 cancelled 状态。

---

就我而言，它是在 chrome 76 更新之后开始出现的。

由于我的 JS 代码中的一些问题，window.location 被多次更新，导致取消之前的请求。虽然之前就存在这个问题，但 chrome 在更新到版本 76 后开始取消请求。

---

更新记录时我遇到了同样的问题。在 save() 内部，我正在准备从表单中获取的原始数据以匹配数据库格式（对枚举值进行大量映射等），这会间歇性地取消 put 请求。我通过从 save() 中取出数据准备并从中创建一个专用的 dataPrep() 方法来解决它。我把这个 dataPrep 变成了 async 并等待所有的内存密集型数据转换。然后我将准备好的数据返回给我可以在 http put 客户端中使用的 save() 方法。在调用 put 方法之前，我确保在 dataPrep() 上等待：

等待数据更新 = 等待数据准备（）； http.put(apiUrl, dataToUpdate);

这解决了请求的间歇性取消。

---