Safari - WebInspector 网络选项卡 - 尝试加载资源时出错答案

【问题标题】：Safari - WebInspector Network Tab - An error occurred trying to load the resourceSafari - WebInspector 网络选项卡 - 尝试加载资源时出错
【发布时间】：2019-03-03 00:36:40
【问题描述】：

我在 Safari 的 XHR/Fetch 开发者工具（网络选项卡）中看到下图中的错误。响应正文不可见。它总是抛出红色文本“尝试加载资源时发生错误”。我最初的想法是 devtool 不支持 fetch 而不是 XHR。但 Safari 12 支持它。

操作系统：MacOS High Sierra 浏览器：Safari 12 & Technology Preview 66

这是否与响应标头有关？ XSS 还是别的什么？ PS：在 chrome 开发工具中可以看到相同的响应体。

【问题讨论】：

您好，您能否提供更多信息，您正在运行哪种服务器以及一些通用代码，以帮助“我们”为您提供更具体的答案。您一定已经注意到，这可能与 Safari 没有直接关系。您是否在其他导航器上尝试过此操作？
点击“标题”（“预览”旁边）时会显示什么？
@kemicofa adobe 基础架构中的后端系统 java。是的，通过 chrome 进行的相同 http 调用会显示响应体 inn 开发工具。
@OldPro ：状态：200 内容类型：应用程序/json； charset=UTF-8 Pragma: no-cache Set-Cookie: *** Content-Encoding: gzip X-XSS-Protection: 1;模式=块过期：2018 年 11 月 24 日星期六 09:32:23 GMT 缓存控制：max-age=0，无缓存，无存储日期：2018 年 11 月 24 日星期六 09:32:23 GMT 内容长度： 295 X-Content-Type-Options: nosniff X-Frame-Options: sameorigin Vary: Accept-Encoding retry-after: 5400 Server: Apache
@kemicofa 感谢您的尝试。根据我的阅读，Safari 在 gzip 响应方面存在一些奇怪的问题。

标签： javascript safari devtools safari-web-inspector

【解决方案1】：

在带有预览的菜单栏右侧有response，旁边有一个箭头，点击它并将其切换到JSON，应该可以解决问题。

【讨论】：

嗨 Yehuda，我无法在预览栏中找到响应，也看不到箭头。您能否进一步解释一下我们需要在哪里将其切换为 JSON。

【解决方案2】：

如果找不到“带预览的菜单栏右侧有箭头响应”，则需要先缩小。

【讨论】：

【解决方案3】：

浏览器的错误消息描述了此请求成功完成的要求。

服务器必须通过发送Access-Control-Allow-Origin 响应标头来向您的远程域授予对所请求资源的访问权限。

在 Safari 12 中，选择网络选项卡中的行。响应将显示在主区域中。上面将是几个选项卡。选择 Headers 选项卡并查看显示数据的请求部分以获取一些请求信息。有关请求数据的详细信息，请查看“请求数据”下的内容。如果适用，那里会有一个小箭头，您可以按下它来查看请求的完整内容。

【讨论】：

我的回复确实有Access-Control-Allow-Origin: *。它只是无法显示在开发工具中，但网页运行良好。

【解决方案4】：

世界还没有为`fetch()`做好准备。

为了解决这个问题，我轻松地将fetch() 转换为axios。

body 变成了data
json 自动解码
credentials 变成了 withCredentials

我还添加了这个函数来判断响应是否为ok：

function ok(resp) {
  return resp && resp.status && resp.status >= 200 && resp.status < 400
}

这就是我需要调整的全部内容。

【讨论】：

谢谢，我已经在 safari 上进行了验证。 fetch 实际上适用于 12+。我也尝试过 Safari Technology Preview。请在 safari 中检查下面的笔。您将看到网络响应。 codepen.io/zellwk/full/QvLRbE。我怀疑 .html 响应，虽然类型是 json。
是的，实际的网络请求有效，但调试变得很痛苦。

世界还没有为fetch()做好准备。

世界还没有为`fetch()`做好准备。