javascript - Fetch 抛出 "TypeError: Failed to fetch"成功的同源请求

Question

我们在单页 JavaScript 应用程序发出 fetch 请求时遇到不一致的客户端错误。值得注意的是，它们都是同源请求。

let request = new Request(url, options);
...
window.fetch(request)
  .then(response => response.json())
  .then(data => ...)
  .catch(error => ...)

尽管服务器和浏览器收到 200 OK，但仍有大约 5% 的 promise 被拒绝并出现以下错误回复:

TypeError: Failed to fetch

我被难住了......我所有的搜索都导致了关于 CORS 错误的讨论。鉴于这些都是同源请求，这似乎并不适用。是什么导致 fetch 抛出 TypeError ?

我可以使用 Chrome DevTools 中的“网络”选项卡确认获取请求以 200 OK 完成。响应和有效的 JSON。我还可以确认 URL 是同源的。我还可以确认没有 CORS 飞行前请求。我已经在 Chrome 66 和 Safari 11.1 上重现了这个问题。但是，我们收到了来自桌面版和移动版 Chrome 和 Safari 版本的错误报告流。

编辑:

这似乎不是链接问题的重复，因为我们没有发送 CORS 请求，没有设置 mode: "no-cors" ，而不是设置 Access-Control-Allow-Origin标题。

此外，我用 mode: 'same-origin' 重新运行了测试。选项明确设置。请求(仍然)成功；但是，我们(仍然)收到间歇性的 TypeError .

Answer 1

我知道这是一个老问题，但是在搜索了整个晚上之后，我想分享我的发现，以便您可以更好地度过时光。
我的网络应用程序对大多数用户也运行良好，但有时访问者会收到问题中提到的错误。我没有使用任何复杂的基础设施(反向代理等)设置，也没有与不同域/协议(protocol)/端口上的服务进行通信。我只是向提供 React 应用程序的同一服务器上的 PHP 文件发送 POST 请求。
简短的回答:我的问题是我使用绝对 URL 将请求发送到后端，例如 https://my-fancy-domain.com/funky_service.php .将其更改为像 /funky-service.php 这样的相对路径后问题消失了。
我的解释:大多数用户访问该站点时 URL 中没有 www，但有些用户实际上确实在其地址栏中输入了这部分 (www.my-fancy...)。原来 www 是原点的一部分 ，所以当这些用户提交表单并将发布请求发送到 https://my-fancy... 从技术上讲，它是另一个来源。这就是为什么浏览器需要 CORS header ，有时甚至会发送一个 OPTIONS 预检请求。当您在 JavaScript 代码中使用相对路径时，发布请求还将包括 www 部分(使用地址栏中的来源)-> 同源-> 没有 CORS 麻烦。由于它只影响带有 www 到您网站的访问者，因此它也解释了即使使用绝对 URL，它也适用于大多数用户的事实。
同样重要的是要知道:请求在浏览器/JavaScript 代码中失败，但实际上被发送到后端(非常丑陋!)。
如果您需要更多信息，请与我们联系。实际上，这很简单但很难解释(和找到)