Nginx防盗链应精准匹配静态资源后缀（如js/css/png/woff2等），避开HTML和API路径，白名单必须包含none、blocked及主域、www域和CDN域名，拦截返回403并确保与SPA的try_files路由兼容。
保护前端静态打包资源（如 Vue/React 的 dist 目录下 JS、CSS、图片、字体等）不被外部盗链，关键不是“全站加锁”，而是精准识别资源类型、区分合法访问路径、避免误伤单页应用（SPA）的正常路由回退。Nginx 防盗链在此场景下应轻量、分层、可验证。
只对高风险静态资源启用 referer 白名单
前端打包产物中，.html 和 / 路由需开放直接访问（否则微信打开、收藏链接失效），但 .js、.css、.png、.woff2、.webp 等极易被其他站点 <script> 或 <img> 直引，应重点防护：
- 用正则精准匹配后缀，避开 HTML 和 API 接口：
location ~* \.(js|css|png|jpg|jpeg|gif|webp|svg|woff2|ttf|eot)$ { - 不要写
location /static/后再靠内部判断——CDN 回源或根目录部署的资源可能不走该路径，导致漏防 - 确保该 location 块内有
root或alias，否则文件 404，防盗链形同虚设
白名单必须覆盖真实访问场景
前端资源常被多端调用：浏览器地址栏直输、微信内嵌页、HTTPS 页面加载 HTTP 资源（Referer 清空）、CDN 回源、甚至 PWA 离线缓存。白名单若缺项，用户会看到空白样式或报错脚本：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 必含
none：支持收藏链接、扫码直达、微信点击跳转等无 Referer 场景 - 必含
blocked：覆盖 HTTPS → HTTP 混合内容拦截、企业防火墙/代理清 Referer 等情况 - 显式列出主域与 www 域：
yourdomain.com和www.yourdomain.com是两个不同字符串，缺一不可 - 若使用 CDN（如 Cloudflare、阿里云 CDN），把 CDN 域名也加入，例如：
cdn.yourdomain.com或正则~\.cloudflare\.net$
拦截动作要语义清晰、便于追踪
返回 403 Forbidden 是最推荐做法，既符合 HTTP 规范，又能让日志、监控、CDN 缓存策略准确识别盗链行为：
立即学习“前端免费学习笔记（深入）”；
- 写法简洁明确：
if ($invalid_referer) { return 403; } - 避免
rewrite ... redirect跳转到提示图——状态码仍是 200，掩盖真实问题，且可能因路径解析错误触发循环 - 如需友好提示（比如显示“资源受保护”小图），改用：
error_page 403 =200 /assets/forbidden.png;（注意：该路径本身不能受防盗链限制） - 建议自定义日志格式，方便排查误拦：
log_format refer_log '$remote_addr - $remote_user [$time_local] "$request" $status $invalid_referer "$http_referer"';
特别注意 SPA 路由与防盗链的兼容
Vue Router / React Router 的 history 模式依赖 try_files $uri $uri/ /index.html; 回退机制。若防盗链 location 写在 location / 下方且未加 ^~ 或优先级控制，可能被覆盖或误匹配：
- 确保图片/JS/CSS 的 location 使用
~*正则，并放在location /块之前（Nginx 按配置顺序匹配，正则优先级低于前缀但可手动调整位置） - 不要给
location /块加防盗链——它会拦截所有页面请求，包括首屏 HTML 加载 - 测试时重点验证：刷新子路由（如
/user/profile）是否仍能加载 JS/CSS；微信内打开首页后点击图片是否正常显示
