对于成功的同源请求，提取将引发“ TypeError：提取失败”

Question

使用单页JavaScript应用程序进行提取请求时，我们遇到了不一致的客户端错误。值得注意的是，它们都是相同来源的请求。

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

尽管服务器和浏览器收到200 OK响应，但仍有大约5％的承诺被拒绝并出现以下错误：

TypeError: Failed to fetch

我很困惑...我所有的搜索都引发了有关CORS错误的讨论。鉴于这些都是相同来源的请求，因此似乎并不适用。是什么原因导致访存抛出TypeError？

我可以使用Chrome DevTools中的“网络”标签来确认获取请求已完成，其中包含200 OK响应和有效的JSON。我还可以确认网址是相同来源的。我还可以确认没有CORS飞行前请求。我已经在Chrome 66和Safari 11.1上重现了此问题。但是，我们收到了来自Chrome和Safari版本（台式机和移动版）的一系列错误报告。

---

编辑：

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

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

Answer 1

我知道这是一个老问题，但经过整个晚上的搜索后，我想分享我的发现，以便您可以更好地度过您的时间。

我的网络应用程序对于大多数用户来说也运行良好，但有时访问者会收到问题中提到的错误。我没有使用任何复杂的基础设施（反向代理等）设置，也没有与不同域/协议/端口上的服务进行通信。我只是向提供 React 应用程序的同一服务器上的 PHP 文件发送 POST 请求。

简短的回答：我的问题是我使用绝对 URL 将请求发送到后端，例如https://my-fancy-domain.com/funky_service.php. 将其更改为相对路径后，/funky-service.php问题就消失了。

我的解释：大多数用户访问的网站的 URL 中都没有 www，但有些用户实际上在地址栏中键入了这部分 ( www.my-fancy...)。事实证明，www 是 origin 的一部分，因此当这些用户提交表单并将帖子请求发送到 https://my-fancy... 从技术上讲，它是另一个 origin 。这就是为什么浏览器需要 CORS 标头，有时甚至发送 OPTIONS 预检请求。当您在 JavaScript 代码中使用相对路径时，post 请求还将包含 www 部分（使用地址栏的来源）-> 相同来源 -> 无 CORS 麻烦。由于它只影响通过 www 访问您网站的访问者，因此它也解释了这样一个事实：即使使用绝对 URL，它也适用于大多数用户。

同样重要的是要知道：请求在浏览器/ JavaScript 代码中失败，但实际上被发送到后端（非常丑陋！）。

如果您需要更多信息，请与我们联系。实际上，它很简单但很难解释（和找到）