nest搭建图片代理

NestJS 前端图片防盗链解决方案:后端代理 vs 其他方式全对比

在开发中,尤其是内容平台聚合、爬虫展示类应用,常会遇到「图片防盗链」问题,掘金、微博、知乎等平台的图片不能直接使用 <img> 标签访问。

本文将从多个维度分析,详细对比不同的应对方式,并最终推荐一个最低成本、最高兼容性、最易实现的解决方案。

应用场景

以掘金图片为例:

ini 复制代码
<img src="https://p3-juejin.byteimg.com/origin/abc.jpg" />

会出现:

  • 图片无法加载
  • 控制台报错:403 Forbidden

掘金通过 Referer 判断是否为盗链请求。

之前的效果是图片加载不出来,浏览器打开也是403


常见解决方案对比

方案 是否可行 优点 缺点
直接使用图片 URL ❌ 不可行 简单直接 被防盗链策略拦截(403)
<img referrerpolicy> ❌ 掘金无效 某些站可用 掘金这类 Referer 校验平台无效
Base64 转换 ⚠️ 可行但不推荐 不怕跨域 请求成本高、性能差
第三方代理如 images.weserv.nl ⚠️ 勉强可用 零配置、简单替代 不稳定、失效率高、转发慢
✅ 自建 NestJS 代理服务 ✅ 推荐方案 灵活、稳定、可控、Referer 可伪造 需少量后端开发时间

推荐方案:NestJS 后端图片代理

通过 NestJS 提供一个统一接口,后端伪造 Referer,再将图片返回给前端。

首先询问claude,我们使用的是nest搭建一个图片代理接口,我们对代码的目录设计就有个大概,当然前端也是要配合的,要将其md文档进行正则替换,减少不必要的修改,造成大量时间成本花费

✅ 实现效果

css 复制代码
<img src="/proxy/img?url=https%3A%2F%2Fp3-juejin.byteimg.com%2Forigin%2Fabc.jpg" />

NestJS 后端负责转发请求,并伪装 Referer: https://juejin.cn/,完美绕过防盗链。


🔧 NestJS 实现步骤

1. 创建代理控制器

less 复制代码
@Controller('proxy')
export class ProxyController {
  @Get('img')
  async proxyImg(@Query('url') url: string, @Res() res: Response) {
    if (!url?.startsWith('http')) {
      return res.status(400).send('Invalid URL');
    }

    try {
      const response = await axios.get(url, {
        responseType: 'arraybuffer',
        headers: { Referer: 'https://juejin.cn/' },
      });
      res.setHeader('Content-Type', response.headers['content-type'] || 'image/jpeg');
      res.send(response.data);
    } catch (e) {
      res.status(500).send('图片加载失败');
    }
  }
}

2. 注册模块

kotlin 复制代码
@Module({ controllers: [ProxyController] })
export class ProxyModule {}

AppModule 中引入:

ini 复制代码
imports: [ProxyModule]

🧩 前端正则替换方案

javascript 复制代码
function replaceImageSrc(content) {
  return content.replace(/<img\s+[^>]*src="(https?://[^"]+)"[^>]*>/g, (match, url) => {
    return match.replace(url, `/proxy/img?url=${encodeURIComponent(url)}`);
  });
}

在 Vue 中使用:

ini 复制代码
<div v-html="replaceImageSrc(rawHtml)" />

💡 Bonus:是否需要缓存?

是否需要缓存 场景
❌ 不需要 少量访问,静态页面、内容展示为主
✅ 建议加 频繁重复请求、内容量大、SEO 优化

可以使用内存 Map、文件缓存、Redis 等方案。

最终效果成功显示出来


✅ 总结

方案 兼容性 性能 实现难度 推荐指数
直接链接 ❌ 差 ★★★
第三方图片代理 ⚠️ 一般 ★★ ⚠️
Base64 ❌ 差 ⭐⭐
✅ NestJS 代理 ✅ 高 ★★★ ⭐⭐ ✅✅✅

如果你想要低成本、可控、稳定又灵活的解决方案,NestJS 后端代理配合正则替换,是目前前后端协作的最优解。

相关推荐
悟乙己19 小时前
通过Claude 生成图片的prompt集锦(一)
prompt·claude·李继刚
win4r1 天前
🚀 SuperClaude让Claude Code编程能力暴增300%!小白秒变顶尖程序员!19个专业命令+9大预定义角色,零编程经验也能开发复杂项目,完全碾
aigc·ai编程·claude
摆烂工程师2 天前
Claude Code 落地实践的工作简易流程
人工智能·claude·敏捷开发
摆烂工程师3 天前
国内如何安装和使用 Claude Code 教程 - Windows 用户篇
人工智能·ai编程·claude
win4r14 天前
🚀Cursor+Serena最佳组合告别AI编程工具短板!支持Claude Code、windsurf、Cline!让AI编程不再是简单读取代码而是智能分析依
aigc·claude·cursor
Captaincc18 天前
Claude Code 如何在无索引机制下实现高效实时代码检索?
ai编程·claude
飞哥数智坊19 天前
AI编程实战:Cursor+Claude4助力15分钟完成大屏开发
人工智能·claude·cursor
北极的树19 天前
搭建一个AI研究团队:我对Claude多智能体深度研究系统的思考与实践
claude
yaocheng的ai分身20 天前
Claude:我们如何构建多智能体研究系统
claude
win4r22 天前
🚀颠覆传统编程!Claude Code+Zen MCP实现多AI协作开发!效率提升20倍!Claude+Gemini 2.5+O3打造专业编程开发团队自动调用
ai编程·claude·mcp