即使返回的内容具有标头 Content-Type:text/html; Chrome 开发工具也无法显示响应字符集=UTF-8

Posted 2023-03-07

【中文标题】即使返回的内容具有标头 Content-Type:text/html; Chrome 开发工具也无法显示响应字符集=UTF-8

【英文标题】：Chrome dev tools fails to show response even the content returned has header Content-Type:text/html; charset=UTF-8

【发布时间】：2016-12-19 20:54:38

【问题描述】：

当返回的内容是 text/html 类型时，为什么我的 chrome 开发者工具会显示“无法显示响应数据”作为响应？

在开发者工具中查看返回响应的替代方法是什么？

【问题讨论】：

我发现 Microsoft Edge Dev（基于 Chromium）没有给我这个错误。

您是否尝试在 Firefox 中检查？

【参考方案1】：

我认为这只发生在您选中“保留日志”并且您在导航离开后尝试查看先前请求的响应数据时。

例如，我查看了加载此 Stack Overflow 问题的响应。你可以看到它。

第二次，我重新加载了此页面，但没有查看标题或响应。我导航到另一个网站。现在，当我查看响应时，它显示“加载响应数据失败”。

这是一个已知的issue，它已经存在了一段时间，并且引起了很多争论。但是，有一种解决方法，您可以在 onunload 上暂停，这样您就可以在它离开之前查看响应，从而在离开时不会丢失数据。

window.onunload = function()  debugger; 

【讨论】：

无法看到响应数据几乎完全扼杀了“保留日志”的意义！

不，在 Chrome 61 中，如果 not 选中“Preserve log”并且不离开页面，肯定也会发生这种情况。

在 chrome 73.0 中仍然遇到这个问题，onunload 修复由于某种原因对我不起作用。

window.onunload = function() debugger; 不再工作了

这个 beforeunload 处理程序对我不起作用，但它稍微修改的版本起作用了：window.addEventListener('beforeunload', function(e) e.returnValue = 'Are you sure?'; return e.returnValue; ); 只需在确认模式中单击“取消”以防止页面重新加载，然后转到网络选项卡查看响应正文 - 它就在那里。

【参考方案2】：

对于在请求 JSON 数据时遇到错误的人：

如果您正在请求 JSON 数据，则 JSON 可能太大，这会导致错误发生。

我的解决方案是将请求链接复制到新选项卡（来自浏览器的get 请求） 将数据复制到在线 JSON 查看器，您可以在其中进行自动解析并在那里进行处理。

【讨论】：

虽然不是真正的解决方案。我使用身份验证等。违背了开发工具的目的。有人可能应该在某处创建一些错误报告。正确答案在这里虽然

这个限制可以以任何方式配置吗？

在我的情况下，它发生在 23MB，这是一个愚蠢的大型 JSON 响应......我打开了一个问题，让错误消息更具描述性。

我看到了 6MB JSON 的问题 :(

在未压缩的 6mb 的 JSON 响应中也遇到了这个问题。

【参考方案3】：

正如 Gideon 所描述的，这是 Chrome 的一个已知问题，已经存在 5 年以上，没有明显的兴趣修复它。

不幸的是，就我而言，window.onunload = function() debugger; 解决方法也不起作用。到目前为止，我发现最好的解决方法是使用 Firefox，即使在导航之后也会显示响应数据。 Firefox 开发工具还缺少 Chrome 中的许多不错的功能，例如，如果响应数据是 html，则语法高亮显示，如果是 JSON，则自动解析它。

【讨论】：

哇，太棒了。需要调试仅发生在 Chrome 而不是 Firefox 的错误。所以我也别无选择。说真的，为什么每个人都说 Chrome 网络工具比 Firefox 的要好得多？好像他们已经好几年没有尝试过 Firefox 了。

Chrome 也没有 Firefox 方便的“编辑和重新发送”请求选项。

是的...还使用FF来完成工作...按预期工作。我们生活在危险的时代！

@Antimony chrome 在很长一段时间内确实有“重新发送”选项，但在最后一个版本中，他们甚至删除了那个......幸运的是，可以在控制台中快速完成fetch(...copied link...)，并观察网络标签中的响应

现在仍然得到这个。为了大声喊叫，我宁愿他们修复他们已经拥有的东西，而不是在控制台中引入无意义的功能，如急切的评估，而忽视他们基本开发工具的质量。

【参考方案4】：

正如 Gideon 所述，这是一个已知问题。 改为使用window.onunload = function() debugger; 。 但是您可以在 Source 选项卡中添加断点，然后可以解决您的问题。 像这样：

【讨论】：

源标签与window.onunload = function() debugger; 相比有什么优势？

你不需要为调试器编写代码，你可以在更高的环境中调试，你可能会在页面之间跳转并且不保留相同的窗口

window.onunload = function() debugger; 对我不起作用，但确实如此。谢谢！

【参考方案5】：

如果您使用 fetch 发出 AJAX 请求，除非使用 .text()、.json() 等读取，否则不会显示响应。

如果你这样做：

 r = fetch("/some-path");

响应不会显示在开发工具中。 运行后显示：

r.then(r => r.text())

【讨论】：

开发工具的这种行为是否存在任何错误？这太荒谬了

@Kos 同意，但仍未修复。刚刚花了 1:30 小时弄清楚为什么我没有得到回复。

只是在这上面浪费了一个小时，看起来 Chrome 还没有修复。我终于和 Postman 确认了，因为我觉得我快疯了，我的内容充满了它的荣耀。

这里也一样。我使用 Brave，但也可以在 Chrome 上重现（显然）。 Safari 中不存在错误。刚刚浪费了两个小时，假设服务器有问题。

非常感谢，我猜一百万年后不会有这种行为。顺便提一句。我正在使用 Edge Dev 96。

【参考方案6】：

如果您正在执行跨域请求并且远程主机未正确处理 CORS 标头，也可能发生“无法显示响应数据”。检查你的 js 控制台是否有错误。

【讨论】：

chrome 仍然因未显示响应（任何形式）而损坏 - FF 为我工作

你是对的！但这正是我需要响应以了解我的请求失败的原因。 curl 一切正常，但 chrome 仍然失败，并显示“对预检请求的响应未通过访问控制检查：请求的资源上不存在 'Access-Control-Allow-Origin' 标头”

【参考方案7】：

对于在请求大型 JSON 数据时收到此错误的人来说，正如 Blauhirn 所提到的，如果您使用身份验证标头等，则不是仅在新选项卡中打开请求的解决方案。

幸运的是，chrome 确实有其他选项，例如 Copy -> Copy as curl。 通过 cURL 从命令行运行此调用将完全复制原始调用。

我在突击队的最后部分添加了> ~/result.json，以将结果保存到文件中。 否则会输出到控制台。

【讨论】：

如果提供响应的服务器状态已更改，则精确副本将毫无用处。所以对我来说，必须等待大约 40 分钟才能发生事件，并且该事件会触发一个新页面，这完全破坏了整个使用。它应该是一个可以切换的选项。 UInfortunatly，除非您是他们团队的一员，否则之前评论中列出的问题的普通访问者没有投票或评论选项：/

【参考方案8】：

对于那些从 Google 来到这里，并且之前的答案并不能解开谜团的人......

如果你使用XHR进行服务器调用，但没有返回响应，就会出现这个错误。

示例（来自 Nodejs/React，但同样可以是 js/php）：

App.tsx

const handleClickEvent = () => 
    fetch('/routeInAppjs?someVar=someValue&nutherVar=summat_else', 
        method: 'GET',
        mode: 'same-origin',
        credentials: 'include',
        headers: 
          'content-type': 'application/json',
          dataType: 'json',
        ,
    ).then((response) => 
        console.log(response)
    );

App.js

app.route('/getAllPublicDatasheets').get(async function (req, res) 
    const  someVar, nutherVar  = req.query;
    console.log('Ending here without a return...')
);

Console.log 将在此处报告：

Failed to show response data

要修复，请将返回响应添加到路由底部（服务器端）：

res.json('Adding this below the console.log in App.js route will solve it.');

【参考方案9】：

错误仍然存​​在。 当 JS 成为新页面（200）或重定向（301/302）的发起者时，就会发生这种情况 一种可能的修复方法 - 它根据请求禁用 javascript。 IE。在 puppeteer 中，您可以使用： page.setJavaScriptEnabled(false) 同时拦截请求(page.on('request'))

【参考方案10】：

另一种可能是服务器没有处理OPTIONS请求。

【参考方案11】：

对我来说，当返回的 JSON 文件太大时会出现问题。

如果您只想查看响应，可以在 Postman 的帮助下获取。请参阅以下步骤：

通过Chrome开发者工具->网络选项卡->找到请求->右键单击它->复制->复制为cURL，从chrome调试器复制请求的所有信息（包括URL、标头、令牌等）。 打开邮递员，导入->Rawtext，粘贴内容。 Postman 将重新创建相同的请求。然后运行请求，您应该会看到 JSON 响应。 [在postmain中导入cURL][1]：https://i.stack.imgur.com/dL9Qo.png

如果您想减小 API 响应的大小，也许您可​​以在响应中返回更少的字段。对于猫鼬，您可以通过在调用 find() 方法时提供字段名称列表来轻松完成此操作。 例如，将方法转换为：

const users = await User.find().lean();

收件人：

const users = await User.find(, '_id username email role timecreated').lean();

在我的例子中，有一个名为 description 的字段，它是一个大字符串。从字段列表中删除后，响应大小从 6.6 MB 减少到 404 KB。

【参考方案12】：

我遇到了同样的问题，但没有一个答案有效，最后我注意到我犯了一个巨大的错误并选择了other，如您所见

现在这似乎是一个愚蠢的错误，但问题是即使在删除并重新安装 chrome 之后问题仍然存在（删除 chrome 时默认情况下不会卸载设置），所以我花了一段时间才找到这个并选择 @987654324 @ 再次...！ 发生这种情况是因为我的后端不处理 OPTIONS 方法，并且因为我错误地点击了 other，导致我花了几天时间尝试答案！

【参考方案13】：

一种解决方法是使用具有相同请求 url、标头和有效负载的 Postman。

肯定会回复的。

【讨论】：

浏览器、ide、postman切换是不是超级不方便？

@BhargavNanekalva，同意，但有时会有所帮助。