Axios请求JSONPlaceholder返回乱码，fetch及RapidAPI请求正常

可能原因及对应解决方案 #

1. 响应压缩解码异常 #

JSONPlaceholder返回的响应默认启用gzip/deflate压缩，Fetch会自动处理压缩解码，但Axios在部分环境或旧版本中可能存在解码失败的情况。

• 解决方案：
  升级Axios到v0.21.0及以上版本（该版本修复了多起压缩响应解码问题）；
  或手动添加请求头，告知服务器返回非压缩响应：

  axios.get('https://jsonplaceholder.typicode.com/posts', {
    headers: {
      'Accept-Encoding': 'identity'
    }
  })
  

2. 响应解析配置错误 #

你尝试过设置responseType但未解决，可能是配置方式或后续处理逻辑有误。

• 解决方案：
  强制设置响应类型为文本后手动解析JSON：

  axios.get('https://jsonplaceholder.typicode.com/posts', {
    responseType: 'text'
  }).then(res => {
    const validData = JSON.parse(res.data)
    console.log(validData)
  })
  

  或者通过transformResponse手动处理解码：

  axios.get('https://jsonplaceholder.typicode.com/posts', {
    transformResponse: [(data) => {
      return JSON.parse(decodeURIComponent(escape(data)))
    }]
  })
  

3. 全局拦截器篡改响应 #

如果项目配置了Axios全局响应拦截器，可能意外修改了响应数据的编码格式。

• 解决方案：
  临时移除全局拦截器测试：

  // 移除全局响应拦截器示例
  axios.interceptors.response.clear()
  

4. 本地代理的编码干扰 #

若测试项目使用了本地代理（如webpack-dev-server），代理服务器可能修改了响应头或编码。

• 解决方案：
  检查代理配置，确保保留响应的编码相关头信息，比如webpack代理添加：

  proxy: {
    '/jsonplaceholder': {
      target: 'https://jsonplaceholder.typicode.com',
      changeOrigin: true,
      pathRewrite: {'^/jsonplaceholder': ''},
      onProxyRes: (proxyRes) => {
        delete proxyRes.headers['content-encoding']
      }
    }
  }
  

验证步骤 #

1. 在浏览器控制台直接运行Axios请求，排除项目配置干扰：

   axios.get('https://jsonplaceholder.typicode.com/posts').then(res => console.log(res.data))
   

2. 用浏览器开发者工具对比Fetch和Axios的请求头，确保Accept、Accept-Encoding等字段一致。

内容的提问来源于stack exchange，提问作者Paul A.