Astro 博客外链图片防盗链踩坑记录

问题描述

在 Astro 博客中使用外链图片（来自 image.kuangyichen.com），浏览器无法加载图片。

症状：

图片链接在浏览器中直接打开 ✅
图片链接通过 curl 访问 ✅
但在博客页面中显示为 403 Forbidden ❌

排查过程

1. 首先怀疑是 CORS 跨域问题

检查：

curl -I -H "Origin: https://eachen.dev" "https://image.kuangyichen.com/..."

结果： 服务器没有返回 Access-Control-Allow-Origin 头

错误： 配置了 CORS，但问题依然存在

2. 发现是 Referer 防盗链问题

关键线索：

# 浏览器发送的请求头
referer: http://localhost:4321/

服务器返回： 403 Forbidden

根本原因

CORS vs Referer 防盗链：

功能	作用	影响范围
CORS	控制 JavaScript 跨域访问	fetch/XHR 请求
Referer 防盗链	根据来源地址拦截	img/video 等资源

对于 <img> 标签：

浏览器会自动发送 Referer 头（包含来源页面地址）
服务器根据 Referer 决定是否允许访问
CORS 配置不影响 img 标签的加载

解决方案

腾讯云 COS 配置

路径：

COS 控制台 → 存储桶 → 基础配置 → 防盗链

配置白名单：

eachen.dev
localhost
localhost:4321

配置项说明：

防盗链开关：开启
Referer 白名单：允许的来源域名
支持通配符：如 *.eachen.dev

或 Nginx 配置

location ~* \.(jpg|jpeg|png|gif|webp|svg)$ {
    valid_referers none blocked eachen.dev localhost;
    if ($invalid_referer) {
        return 403;
    }
}

参数说明：

none：允许空 Referer（直接在浏览器打开）
blocked：允许被防火墙阻止的请求
eachen.dev：允许的域名
localhost：允许本地开发

验证方法

# 测试带 Referer 的请求
curl -I -H "Referer: http://localhost:4321/" "https://image.kuangyichen.com/..."

# 应该返回 200 OK

经验总结

img 标签不需要 CORS
- img/video/script 标签加载资源不受 CORS 限制
- CORS 只影响 JavaScript 的 fetch/XHR 请求
防盗链检查 Referer
- 浏览器自动为 img 标签添加 Referer 头
- 服务器根据 Referer 决定是否放行
排查步骤
- 先检查服务器返回的 Status Code
- 再看请求头中的 Referer
- 最后检查服务器的防盗链配置
解决方案优先级
- 优先配置 Referer 白名单（推荐）
- 下载图片到本地（稳妥但占空间）
- 关闭防盗链（不推荐，容易被他人盗用）