部署远程后端后Axios返回乱码字符串问题排查

• 技术栈：Headless CMS（Strapi）+ Next.js，通过getStaticProps获取CMS数据
• 本地环境：使用Axios请求Strapi接口可正常返回JSON数据
• 远程部署后：Axios请求同一接口返回乱码字符串，但Next.js的fetch、Postman及浏览器直接请求均能获取正常JSON
• 已尝试操作：设置responseType: 'json'，问题未解决

代码示例 #

本地正常代码：

var res = await axios.get("http://localhost:3001/api/posts")
var data = res.data

远程服务器下fetch正常代码：

var res = await fetch("http://server.url/api/posts")
var data = await res.json()

远程服务器下Axios返回乱码的代码：

var res = await axios.get("http://server.url/api/posts")
var data = res.data

乱码示例 #

▼♥��Kn�0►��↕�[�%�O�.Ȧ@�t◄�ZtA�DJđ
�j�→�IoӋu(
�♥��‼�����∟Ή�C
...（省略后续乱码内容）

1. 强制指定UTF-8编码解析响应
   远程服务器返回的响应编码可能未被Axios正确识别，手动通过arraybuffer获取原始数据后用UTF-8解码：

const res = await axios.get("http://server.url/api/posts", {
  responseType: 'arraybuffer',
  transformResponse: [(data) => new TextDecoder('utf-8').decode(data)]
})
const data = JSON.parse(res.data);

2. 修正Strapi服务器的响应头字符集
   确认Strapi返回的Content-Type头是否包含charset=utf-8。若缺失，Axios可能用系统默认编码解析导致乱码。可在Strapi项目的config/middlewares.js中强制配置：

module.exports = [
  // 其他中间件配置
  {
    name: 'strapi::response',
    config: {
      charset: 'utf-8',
    },
  },
];

3. 禁用Axios自动响应转换
   关闭Axios默认的自动解析逻辑，手动处理JSON转换：

const res = await axios.get("http://server.url/api/posts", {
  transformResponse: (data) => data
})
const data = JSON.parse(res.data);

4. 检查服务器压缩配置
   若远程服务器开启了Gzip/Deflate压缩，Axios可能未正确处理解压。可尝试禁用请求的压缩头：

const res = await axios.get("http://server.url/api/posts", {
  headers: {
    'Accept-Encoding': 'identity'
  }
})

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