什么会导致 Chrome 针对 localhost 上的服务器在缓存内容上给出 net::ERR_FAILED？

Posted 2023-03-05

【中文标题】什么会导致 Chrome 针对 localhost 上的服务器在缓存内容上给出 net::ERR_FAILED？

【英文标题】：What can cause Chrome to give an net::ERR_FAILED on cached content against a server on localhost?

【发布时间】：2014-05-05 02:31:31

【问题描述】：

我正在构建一个 Web 服务器并尝试进行测试。服务器在localhost:888 上运行，当我第一次加载 Web 应用程序时，一切正常。但是如果我尝试重新加载页面，一堆XmlHttpRequest 请求会以net::ERR_FAILED 失败。通过在服务器代码中设置断点，我可以验证请求从未真正进入。

这不是连接失败，因为连接是第一次成功。它成功一次然后失败的事实意味着它可能与缓存相关，但服务器代码中没有设置cache-control 标头的任何内容。所以我通过将服务器放在实际的 Web 服务器上来测试它。第一次，一切都必须花时间加载；第二次，它全部立即加载，所以这肯定是缓存相关的

这是在http.sys（无 IIS）之上运行的自定义服务器，似乎默认情况下会缓存内容，然后在后续运行中无法从中加载，但仅当我的服务器在 localhost 上运行时;在网络上，它工作正常。据我所知，net::ERR_FAILED 是 Chrome 中的通用“出了点问题，我们没有对您有用的信息”消息，所以我有点卡在这里。有谁知道是什么原因造成的？

【问题讨论】：

一个可能的原因是您的 AppCache Manifest 不允许这样做。我想可能还有很多其他原因（CORS？）。

您有任何 CORS 问题吗？请尝试在 chrome 中禁用网络安全，看看问题是否仍然存在。要禁用使用 smt，例如："C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security from command line。

您在运行 AdBlock 吗？众所周知，它会在本地环境中导致此类错误。

@DennisPriebe：不。这里没有 AdBlock。

【参考方案1】：

我遇到了类似的问题。我已将请求复制为 devtools 的 Network 选项卡中的 fetch。

然后我在浏览器开发控制台中运行它。在那里我可以阅读有关 CORS 的错误描述。在 api 服务器上设置 cors 后，它工作了。

您必须将 fetch 命令粘贴到同源的开发控制台中，而不是意外粘贴，例如从***打开它。

【参考方案2】：

另一个原因是，当您使用withCredentials: true（发送跨域cookie）进行XHR调用时，您不能设置Access-Control-Allow-Origin: *，但必须提供特定的域！

遗憾的是，您不能在此处使用域列表，因为没有浏览器支持此官方标准。但是有几个框架，比如 Spring，允许你设置白名单配置，然后根据请求进行匹配。

另见：

CORS: Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true Header in the response must not be the wildcard '*' when the request's credentials mode is 'include' https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials

【参考方案3】：

这组答案中有一个非常重要且不受欢迎的评论是“查看您的 CORS 标头”。我有一个很像这样的问题，它给了我一些刺激的这个错误。我的 Apache 日志中没有数据，但我注意到我们正在调用辅助 URL 并且没有收到对该辅助 URL 的响应。

Chrome 最初并未将其称为 CORS 问题，但由于缺乏响应，我不得不深入研究我们的 Apache 设置并更改允许的 CORS 源标头。

<Directory /var/www/>
        Options Indexes FollowSymLinks
        AllowOverride None
        Require all granted
        Header set Access-Control-Allow-Origin "https://our-site.com"
        Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
        Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

</Directory>

此答案可能不适用于您的情况，但适用于我的net::ERR_FAILED

【参考方案4】：

只有一种方法可以查明这些类型的错误

在 chrome 中，在一个选项卡中使用 chrome://net-export/，然后在另一个选项卡中记录会话并使用https://netlog-viewer.appspot.com/#import 进行调试，这样您就可以以更易读的格式查看输出。

我们最近发现由于客户端网络上的代理身份验证问题而导致套接字关闭的 ERR_FAILED。

一旦您从上面得到错误代码，这也可能是有用的参考 chrome://network-errors/

【参考方案5】：

一个可能的原因是您写错了 AppCache Manifest。 例如：在您的 /a/b/cache.html 文件中，您引用了 cache.appcache Manifest 文件，但在 cache.appcache 文件中，您声明如下：

缓存：

/cache.html

这是错误的。

你应该写：

缓存：

/a/b/cache.html

希望对你有帮助。

【参考方案6】：

在 package.json 的最后一行添加 "proxy": "http://localhost:port_number/" 和 mode: 'same-origin'客户端的请求正文。例如，

fetch('login', 
      method: 'post',
      mode: 'same-origin',
      headers: 
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      ,
      body: JSON.stringify(
        username: username,
        password: password,
      )
    )

【参考方案7】：

在请求我的一个虚拟主机时（星期一早上），我在本地主机上遇到了这个错误。结果我仍然在另一个虚拟主机上运行未完成的调试操作（从我星期五下午开始的未完成的工作:)），这阻止了 Apache 为其他请求提供文件。这导致我的浏览器控制台出现net::ERR_FAILED 错误。

希望这可能对其他在这里结束的人有所帮助。

【参考方案8】：

在我的情况下，安装 SSL 证书解决了这个问题。

【参考方案9】：

另一个潜在的原因是服务工作者处理的请求遇到了某种麻烦。在这种情况下，值得在开发工具中检查 service worker 控制台，看看那里是否有错误消息。

【参考方案10】：

如果使用节点，请确保在路由之前添加 CORS 标头。浏览器

app.use(function(req, res, next) 
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
);

app.get('/route.htm', function (req, res) 
    res.sendFile( __dirname + "/" + "route.htm" );
);

而不是将app.use放在后面。