背景

在引用公众号或其他网站的图片时， 被拦截了， 不给引用，如果一张张下载下来，确实又很麻烦，有没有方式可以引用呢？

分析

• 为什么被拦截？ 主要是因为资源有限，防止被外面滥用

• 拦截原理 一般是通过请求中的referrer字段来判断的

解决

在浏览器请求资源的时候，会自发带上referrer字段，表明来自哪里，所以浏览器端不好去解决。

• 解决思路 通过请求nodejs，然后nodejs去请求对应服务器资源，nodejs请求时是不带referrer或者referrer值为空，这样就不会被拦截，nodejs请求得到返回后再返回给浏览器呈现，这样就绕过了检查referrer的校验手段

• 使用koa搭建的nodejs服务器

  • 获取请求参数
  • 通过axios发起请求，格式为stream
  • 获取到结果后返回给ctx.body
  • 设置返回格式

// 关键代码
export const image = async (ctx: Context) => {
  const { url } = ctx.request.query;
  const result = await axios.get(url, {
    responseType: 'stream',
  });
  ctx.success({ data: result.data, type: 'image/avif,image/webp,image/apng,image/jpeg' });
};