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

【问题标题】：What does status=canceled for a resource mean in Chrome Developer Tools?在 Chrome 开发者工具中，资源的 status=canceled 是什么意思？
【发布时间】：2012-08-14 02:47:45
【问题描述】：

什么会导致页面被取消？我有 Chrome 开发者工具的截图。

这种情况经常发生，但不是每次都发生。似乎一旦缓存了其他一些资源，页面刷新就会加载 LeftPane.aspx。真正奇怪的是，这只发生在 Google Chrome 中，而不是 Internet Explorer 8。知道为什么 Chrome 会取消请求吗？

【问题讨论】：

您可以从net-internals 跟踪中获得更多详细信息。我有一个类似的问题，在我的案例中发现取消是 net::ERR_ABORTED 在封面下。如果是这种情况，this post 解释说“net::ERR_ABORTED 仅在用户操作导致加载中断时生成。这可能发生在新导航中断现有导航时，或者当用户单击停止按钮。”
谢谢。在我的情况下，它不是用户，因为我是用户。该页面确实有（太多）框架。也许框架 src 被改变了？奇怪的是，我从未在 IE 中看到过这种情况。我会研究一下网络内部。
@nondescript1 我在重现错误并转储到文件时进行了捕获。现在我有一个 18,000 行的 json 文件。我在找什么？
我真的不知道。实际上，当我自己寻找有关 status=canceled 的更多信息时遇到了您的问题，这就是为什么我只添加 cmets 而不是答案的原因；）。我没有理由认为它与缓存有关。我更怀疑另一个导航在页面中启动了某人。当我看到这个时，我试图使用 window.open() 启动下载，这导致另一个服务器请求被取消。就我而言，Firefox 没有这个问题，但 Chrome 有。
不言而喻，状态列中“（已取消）”的一个可能原因——尽管绝对不是唯一可能的原因——是给定的 URL 已返回404 或其他错误。强制刷新另一个选项卡中的 URL 几次，以确保加载一致。

标签： debugging http google-chrome developer-tools web-developer-toolbar

【解决方案1】：

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

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

导致发出请求的 DOM 元素被删除（即正在加载 IMG，但在加载发生之前，您删除了 IMG 节点）
您做了一些不需要加载数据的事情。（即您开始加载 iframe，然后更改 src 或覆盖内容）
有很多请求发往同一台服务器，早期请求的网络问题表明后续请求无法正常工作（DNS 查找错误、早期（相同）请求导致例如 HTTP 400 错误代码等）

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

【讨论】：

非常有用，谢谢。我很难重现这个错误，因为一旦缓存了东西，它就不会发生。如果在我的 javascript 中设置断点，则不会发生。您的第一个要点可能不是问题，因为我没有看到元素被删除。我知道事实上它不是要点 3。“一旦你触摸 iframe 的内容，它就不能再将资源加载到其中”是什么意思？能举个例子吗？
@styfle 是的，但它也可以是 document.write 以外的东西。任何尝试写入框架的东西，如 appendChild 或类似的东西都可能导致这种情况。您可能希望在每个框架中创建一个 onLoad 处理程序，将true 写入某个变量，然后其他框架在接触任何内容之前先查找它。
我也遇到了可怕的问题。如果 AJAX 响应的状态代码为 301/302 并且重定向 URL 在另一个域上，我发现的一件事确实会触发此问题。对我来说，这是对问题的一致再现。
只是补充一点，我发现另一个我在表单发布后进行 302 重定向的地方，请求在 Chrome 中显示为已取消，但服务器日志显示 302 响应。这是因为 Location 标头的 URL 不正确：localhost:8080 而不是 http://localhost:8080。希望这对某人有帮助！
刚刚在一个 React 应用程序中发生了这种情况，其中发出请求的组件被从 DOM 中取出。感谢您的帮助！

【解决方案2】：

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>

【讨论】：

这救了我，这是我的问题，我在带有type="submit" 的按钮上使用了角度的ng-click，然后在被调用的函数中进行了一些联网。 Chrome 一直在取消该请求...
不幸的是它对我不起作用。还有其他提示吗？
Vaov 也救了我！对于有角度的 ng-click 事件，我嵌套了 $http 请求，第二个请求被取消。设置阻止默认行后，它又开始工作了，谢谢。
谢谢。我知道这不是 CORS 或 DOM 问题。也许@whamma 可以更新他们的答案，将其作为完整性的可能原因:)
主人万岁！！楼主，你真是个天才！！我得救了！！

【解决方案3】：

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

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

【讨论】：

这是我的根本原因 - 一个按钮触发了两次 POST。由于 CSS 的原因，我不想将按钮移出表单元素，所以这是解决方案：stackoverflow.com/questions/932653/…
同样的问题。澄清一下，我有一个按钮包含在一个提交类型的表单中，但是有一个 onclick 正在执行 jquery 表单提交，ajax 提交。它在 FF 中工作，但在 chome 和 IE 中失败，让我发疯，直到我找到它。
这解决了我在 Vue.js 应用程序中发生的一个问题，其中 @click 事件绑定到表单包装器内的 <button> 元素。除非您使用 Vue 的 @submit.prevent 事件修饰符，否则请避免这样做。
这就是我的情况。通过在我的按钮标签中添加type="button"，表单没有提交，并且取消了事件。

【解决方案4】：

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

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

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

【讨论】：

到底发生了什么。打开 noscript 插件，突然 iFrame 不再加载了。
对我来说，它是 Hola 插件。禁用后，请求不再被取消。
在我的例子中，它是“JavaScript Errors Notifier” chrome 扩展
我尝试查看所有内容，但 Angular 8 仍然没有运气，禁用所有扩展程序并且仍然在慢速 3G 网络上之前的呼叫被取消。 :(

【解决方案5】：

在我的例子中，我发现是jquery全局超时设置，一个jquery插件设置全局超时为500ms，这样当请求超过500ms时，chrome会取消请求。

【讨论】：

遇到同样的问题。在我的例子中，它是使用 VirtualBox 来宾服务器的本地 WordPress/WooCommerce 开发，一些 WooCommerce AJAX 请求具有 5000 毫秒的预定义 AJAX 超时。如果有人遇到同样的问题，这个超时在includes/class-wc-frontend-scripts.php 文件中定义。

【解决方案6】：

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

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

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

【讨论】：

这正是我的问题。该线程对如何修复它有很好的答案：stackoverflow.com/questions/6666423/…

【解决方案7】：

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

【讨论】：

虽然原因很明显，但是，这实际上是一个非常有用的答案。我正在编辑一些旧的咖啡脚本代码，并且完全忘记了单引号没有进行 #{} 插值，因此生成的 url 格式不正确。但 Chrome 并没有告诉我任何有关它的信息。

【解决方案8】：

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

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

【讨论】：

你基本上可以从非证书域重定向到证书域吗？从裸体到 www？或者您总是看到取消或证书错误？

【解决方案9】：

在 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 中的某些内容发生了变化。

【讨论】：

在使用 Datacash 托管的支付服务时，我在 Chrome 30 中看到几乎相同的行为，但在我的情况下，从 3dsecure 站点到 Datacash 站点的 POST 被取消，尽管两者都是 https。事实证明这是一个谜。

【解决方案10】：

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

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

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

接受
缓存控制
编译指示
参考
用户代理

在后一种情况下，所有这些加上其他类似：

饼干
连接
主机
接受编码
接受语言

耸耸肩

【讨论】：

【解决方案11】：

当我通过 JavaScript 重定向时，我在 Chrome 中遇到了这个错误：

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

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

【讨论】：

【解决方案12】：

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

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

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

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

问题消失了！

【讨论】：

【解决方案13】：

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

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

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

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

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

【讨论】：

【解决方案14】：

我也遇到过同样的问题，在我们代码深处的某个地方我们有这个伪代码：

创建 iframe
加载 iframe 提交表单
2 秒后，移除 iframe

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

【讨论】：

谢谢，您节省了我的时间！我遇到了 iframe 的问题，但不知道为什么它被取消了。您的研究帮助我调试并找到了在 iframe 打开期间快速重新渲染的问题。

【解决方案15】：

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

【讨论】：

【解决方案16】：

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

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

例如

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

    e.preventDefault();

    //do ajax
    $.ajax({

     ...
    });

})

【讨论】：

【解决方案17】：

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

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

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

【讨论】：

【解决方案18】：

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

【讨论】：

【解决方案19】：

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

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

因此，检查 htaccess 文件是否有任何潜在冲突可能是值得的

【讨论】：

【解决方案20】：

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

【讨论】：

【解决方案21】：

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

document.location.href = mailToLink;

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

【讨论】：

【解决方案22】：

这可以帮助我在遗漏返回 false 时遇到取消状态的任何人；在表单中提交。这导致 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
});

希望对某人有所帮助。

【讨论】：

【解决方案23】：

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

同样，这是专门针对回送 API 的。由于这是一个顶级答案，并且在谷歌上排名第一，我想我会把它放在各种答案中。

【讨论】：

【解决方案24】：

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

【讨论】：

【解决方案25】：

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

【讨论】：

【解决方案26】：

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

【讨论】：

【解决方案27】：

我在加载 300 张图片作为背景图片时发生了这种情况。我猜一旦第一个超时，它会取消所有其余的，或者达到最大并发请求。需要实现一次 5 次

【讨论】：

【解决方案28】：

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

【讨论】：

【解决方案29】：

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

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

【讨论】：

【解决方案30】：

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

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

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

【讨论】：