防盗链测试需用两个域名环境验证referer控制效果：合法来源正常加载，非法来源返回403或替代图，并覆盖none/合法/非法三类referer场景，同时检查css、字体等隐性资源拦截情况。
测试带防盗链配置的前端页面加载表现，核心是观察资源（尤其是图片、CSS、JS）在不同 Referer 条件下的实际加载行为——是否显示、是否报错、是否被替换或跳转。这不是只看 Nginx 日志或返回码，而是要还原真实用户视角。
准备两个可区分来源的测试环境
必须有至少两个域名/IP：一个是你自己的网站（合法来源），另一个是模拟盗链的页面（非法来源）。例如：
-
主站：http://lee.timinglee.org（Nginx 配置了防盗链，静态资源路径如
/img/lee.png） -
盗链页：http://192.168.226.21/index.html（页面中直接写
<img src="http://lee.timinglee.org/img/lee.png?x-oss-process=image/resize,p_40">）
两台机器需关闭防火墙和 SELinux，确保网络互通；盗链页不能用 localhost 或 file:// 协议，否则浏览器不发 Referer，会误判为 “none” 情况。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
在浏览器中直观验证加载效果
打开盗链页（如 http://192.168.226.21/index.html），观察以下现象：
- 图片区域是否空白、显示“损坏的图像”图标，或出现替代图（若你配置了
return 403或rewrite ^/ img/forbidden.png break;） - 右键 → “检查” → 切换到 Network 标签页，筛选
Img，点击被盗链的图片请求，查看 Status 是否为403，Response Headers 中是否有X-Content-Type-Options: nosniff等辅助判断字段 - 对比直接访问主站（http://lee.timinglee.org）时同一张图能否正常加载，确认防盗链未误伤自身
针对性触发三类 Referer 场景
手动构造请求，验证配置逻辑是否覆盖完整：
-
无 Referer：在地址栏直接输入图片 URL（如
http://lee.timinglee.org/img/lee.png），应能加载（因valid_referers none已启用） -
合法 Referer：从主站页面内点击链接跳转到该图，或用 curl 模拟：
curl -H "Referer: http://lee.timinglee.org/" http://lee.timinglee.org/img/lee.png，应返回图片 -
非法 Referer：用 curl 模拟盗链：
curl -H "Referer: http://evil.com/" http://lee.timinglee.org/img/lee.png，应返回 403 或自定义响应
留意前端感知不到但后端已拦截的情况
有些资源（如背景图 CSS、字体文件、AJAX 请求的 JSON 图片路径）不会在页面上直接显示错误，但会在 Network 面板中表现为 pending 或 failed。建议：
- 打开浏览器开发者工具的 Network → Filter 输入
img、css、font，清空列表后刷新盗链页，逐个检查状态 - 查看 Console 是否报错，例如
Failed to load resource: the server responded with a status of 403 (Forbidden) - 如果配置了
location ~* \.(jpg|png|gif)$ { ... }，但页面里用了 WebP 格式，需同步扩展匹配规则，否则 WebP 图片会被放行——这是常见疏漏
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
