express 转发图片请求及原理分析

怎么用

有的时候, 前端同学用 canvas 合成图片的时候, 会遇到图片跨域问题(比如合成用户的微信头像和其他图片), 虽然前端也有一些办法去避免这个问题, 但是做起来还是比较麻烦的, 兼容性也不太好. 为了让前端同学不那么麻烦, 可以在自己的服务器做一个转发

代码如下(在 express 下)

// 命令行运行 npm install axios 
const axios = require('axios')
const router = express.Router()

router.use('/avatar', (req, res) => {
  axios({
    method: 'get',
    // 这里拼接图片的地址
    url: 'http://thirdwx.qlogo.cn' + req.path,
    responseType: 'stream'
  })
    .then(response => {
      // pipe 一下就好了...
      response.data.pipe(res)
    })

})

原理

以前我认为 express 的 response 是作者自己定义的一个对象, 类似下面这种

const res = {
  send: ...,
  header: ...,
  json: ...,
  ...
}

但其实不是, 它继承于一个 Node.js 标准库 http 中的一个对象

// 源码中, response.js 下

var res = Object.create(http.ServerResponse.prototype)

再去文档看一下 http.ServerResponse 是什么

image.png

因为 http.ServerResponse 是继承自流的, 看名字就知道这是用于 一次 http 请求的响应, 所以在 pipe 之后, 就会将数据返回给客户端了