Chrome开发工具无法显示响应，即使返回的内容包含标题Content-Type：text / html;字符集= UTF-8

Question

为什么我的chrome开发人员工具在返回的内容为text / html类型时显示“无法显示响应数据”？

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

Answer 1

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

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

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

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

window.onunload = function() { debugger; }

Answer 2

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

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

我的解决方案是将请求链接复制到新标签页（export class ClassA { description: string; type: string; order: number; constructor(descrption: string, type: string, order: number) { this.description = descrption; this.type = type; this.order = order; } } 来自浏览器的请求） 将数据复制到联机的JSON查看器，您可以在那里自动解析并在那里进行处理。

Answer 3

正如Gideon所描述的，这是Chrome已知的一个问题，该问题已经开放了5年多，对修复它没有明显的兴趣。

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

Answer 4

正如吉迪恩所描述的，这是一个众所周知的问题 使用window.onunload = function() { debugger; }代替 但是您可以在“源”选项卡中添加断点，然后可以解决您的问题。 像这样：

Answer 5

＆＃34;无法显示响应数据＆＃34;如果您正在执行跨域请求并且远程主机未正确处理CORS标头，也会发生这种情况。检查你的js控制台是否有错误。

Answer 6

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

如果您只是这样做：

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

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

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

Answer 7

对于曾经在请求大JSON数据时收到此错误的人，正如Blauhirn所说，这不是一种解决方案，如果您使用身份验证标头之类，则只能在新选项卡中打开请求。

此外，chrome确实具有其他选项，例如“复制”->“复制为卷曲”。 从命令行通过cURL运行此调用将与原始调用完全相同。

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

Answer 8

错误仍然有效。 当JS成为新页面（200）或重定向（301/302）的发起者时，就会发生这种情况 修复它的一种可能方法-根据要求禁用JavaScript。 即在操纵up的人中，可以使用：page.setJavaScriptEnabled（false）拦截请求（page.on（'request'））

Answer 9

对于那些来自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.');

Answer 10

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

Answer 11

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

如果你只是想看看回复，你可以在邮递员的帮助下得到。请参阅以下步骤：

1. 通过 Chrome 开发者工具->网络选项卡->找到请求->右键单击它->复制->复制为cURL，从chrome调试器复制包含所有信息（包括URL、标头、令牌等）的请求。
2. 打开postman，导入->Rawtext，粘贴内容。邮递员将重新创建相同的请求。然后运行请求，您应该会看到 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。

Answer 12

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

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

Answer 13

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

它肯定会给出回应。