使用Axios发送POST请求时浏览器端响应截断问题求助

我之前也碰到过一模一样的情况！一开始以为是Axios没拿到完整响应，后来才发现是浏览器控制台的锅——它对大字符串会自动截断显示，而Node环境的终端没有这个限制，所以能看到完整内容。

先给你个最简单的验证方法：别直接打印整个response，先打印响应体的长度：

axios({
  method: 'POST',
  url: url,
  data: data,
  headers : headers,
})
.then(function (response) {
  console.log('响应体长度:', response.data.length); // 应该接近4*1024*1024=4194304
});

如果长度和你预期的4MB一致，说明Axios已经完整拿到了响应，只是浏览器console.log把长字符串截断了。

接下来给你几个实用的解决办法：

方法1：导出完整响应到本地文件 #

如果需要查看完整内容，直接把响应体导出成文本文件是最方便的：

axios({
  method: 'POST',
  url: url,
  data: data,
  headers : headers,
})
.then(function (response) {
  // 创建Blob对象
  const blob = new Blob([response.data], { type: 'text/plain' });
  // 生成下载链接
  const downloadUrl = URL.createObjectURL(blob);
  // 创建a标签触发下载
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.download = 'full-response.txt';
  document.body.appendChild(link);
  link.click();
  // 清理资源
  document.body.removeChild(link);
  URL.revokeObjectURL(downloadUrl);
});

方法2：分段打印到控制台 #

如果一定要在控制台看，可以把大字符串切成小段打印：

axios({
  method: 'POST',
  url: url,
  data: data,
  headers : headers,
})
.then(function (response) {
  const chunkSize = 1000; // 每段1000字符
  const content = response.data;
  for (let i = 0; i < content.length; i += chunkSize) {
    console.log(`分段 ${Math.floor(i/chunkSize)+1}:`, content.slice(i, i + chunkSize));
  }
});

方法3：用console.dir代替console.log #

有些浏览器的console.dir不会截断长字符串，试试这个：

axios({
  method: 'POST',
  url: url,
  data: data,
  headers : headers,
})
.then(function (response) {
  console.dir(response.data, { depth: null });
});

极端情况：Axios本身限制了响应长度 #

虽然你说Network面板能看到完整响应，但还是可以排查下Axios的配置——默认情况下Axios的maxContentLength和maxBodyLength可能有上限，手动设置成无限大试试：

axios({
  method: 'POST',
  url: url,
  data: data,
  headers : headers,
  maxContentLength: Infinity,
  maxBodyLength: Infinity
})
.then(function (response) {
  console.log(response.data.length);
});

总结一下：90%以上的概率是浏览器控制台的显示截断，不是Axios的问题，先打印长度确认这一点，再选上面的方法查看完整内容就行。

内容的提问来源于stack exchange，提问作者Sam R