Express端点通过Axios获取图片后返回显示破损问题排查

你的代码里有个关键错误：axios的responseType配置放错位置了——它应该是请求配置的顶级属性，不是嵌套在headers对象里。这个错误会导致axios没有正确解析响应为ArrayBuffer，返回的可能是乱码字符串或未正确处理的二进制数据，浏览器自然无法识别为有效图片。

另外还有几个优化点可以避免类似问题：

• 用res.end()代替res.send()发送二进制数据，res.send()会对数据做额外字符编码处理，可能破坏二进制内容
• 增加错误捕获逻辑，避免请求失败时返回无效数据
• 确保目标接口返回的确实是PNG图片，避免硬编码的Content-Type与实际格式不匹配

修正后的代码：

const axios = require('axios')
const token = 'Bearer key-auth'
app.get('/test', async (req, res, next) => {
  try {
    // 将responseType移到配置顶级，与headers同级
    const response = await axios.get('example/url/image', {
      headers: { Authorization: token },
      responseType: "arraybuffer"
    })
    // 把ArrayBuffer转为Node.js兼容的Buffer格式
    const imageBuffer = Buffer.from(response.data)
    res.set({
      'Content-Type': 'image/png',
      'Content-Length': imageBuffer.length
    })
    res.end(imageBuffer)
  } catch (err) {
    // 捕获请求错误并返回友好提示
    console.error(err)
    res.status(500).send('获取图片失败')
  }
})

额外排查建议：

• 直接携带Authorization令牌访问目标图片URL，确认源接口能正常返回图片，排除源端问题
• 在代码中打印response.data的类型和长度，确认是ArrayBuffer且长度符合预期
• 如果目标图片可能是其他格式（如JPG），不要硬编码Content-Type，可以直接复用源响应的头信息：res.set('Content-Type', response.headers['content-type'])

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