CFBlog 使用EdgeOne代理后后台403跨域报错完整修复
问题:CFBlog 通过 Cloudflare EdgeOne 反向代理后,访问管理后台接口返回报错:
Cross‑origin cookie authentication is not allowed.,状态码403。
环境:GitHub网页直接编辑源码,GitHub Actions自动部署,无本地wrangler环境。
📌 问题根源
CFBlog 内置的鉴权逻辑会校验请求来源 Origin。
- 浏览器访问:
https://blog.195094.xyz,请求头 Origin 为博客域名 - 经过EdgeOne代理,Worker收到的
c.req.url依旧是xxx.workers.dev - 代码判断:
origin !== requestOrigin,直接拦截Cookie鉴权请求,抛出403。
⚠️ 注意:不要修改EdgeOne回源Host头,修改Host会引发其他未知问题。我们通过代码增加信任域名白名单来解决。
🛠️ 修复步骤
1️⃣ 修改源码:src/middleware/auth.ts
找到函数 isCookieRequestOriginAllowed,全部替换为下面代码。
使用
as any绕过TypeScript类型校验,不需要修改types.ts文件,适合GitHub网页快速修改。
function isCookieRequestOriginAllowed(c: Context): boolean {
if (['GET', 'HEAD', 'OPTIONS'].includes(c.req.method.toUpperCase())) {
return true;
}
const requestOrigin = new URL(c.req.url).origin;
const origin = c.req.header('Origin');
// 读取环境变量信任源白名单,逗号分隔多个域名
const trustedOrigins = ((c.env as any).TRUSTED_ORIGINS || "")
.split(",")
.map(s => s.trim())
.filter(Boolean);
if (origin) {
// 在信任白名单内直接放行,其余保留原有origin相等校验
if (trustedOrigins.includes(origin)) {
return true;
}
return origin === requestOrigin;
}
const fetchSite = c.req.header('Sec‑Fetch‑Site');
return !fetchSite || fetchSite === 'same‑origin' || fetchSite === 'none';
}
###2️⃣ 修改配置文件:wrangler.toml
⚠️ TOML 语法重点:内联表 {} 不允许换行!换行就会报 Invalid TOML document 解析错误。
✅ 推荐单行写法(直接复制)
toml
vars = { TRUSTED_ORIGINS = "https://blog.195094.xyz" }
备选多行表写法(二选一,不要混用)
toml
[
vars
]
TRUSTED_ORIGINS = "https://blog.195094.xyz"
✨多域名支持
如果有多个域名,使用英文逗号隔开:
toml
vars = { TRUSTED_ORIGINS = "https://blog.195094.xyz,https://www.blog.195094.xyz" }
3️⃣ 提交代码,触发自动部署
保存修改的两个文件,Commit 提交到 GitHub 仓库
等待 GitHub Actions 完成构建 & 部署到 Cloudflare Workers
4️⃣ EdgeOne 回源配置(关键)
回源地址填写你的 workers.dev 域名
❌ 禁止修改回源 Host 请求头
缓存规则设置:路径匹配 /wp‑json/*,设置为不缓存
5️⃣ 浏览器端必做操作
旧 Cookie 会残留缓存,不清除依旧会 403!
打开你的博客域名
F12 开发者工具 → Application → Cookies,删除该域名全部 Cookie
清除本地 Storage 存储,刷新页面,重新登录后台
🚨 常见报错排查
- CI 报错:Invalid TOML document: newlines are not allowed in inline tables
原因:vars = { ... } 内部换行,TOML 语法不允许。
解决:把 vars 整行写在同一行,不要换行。 - CI 报错:Process completed with exit code 1
打开 GitHub Actions 工作流日志,查看真实错误:
要么是 TOML 配置语法错误
要么是 TS 代码语法写错 - 修改完依旧报 403
确认 GitHub Actions 部署已经成功完成,不是旧版本 Worker
确认浏览器彻底清除 Cookie 与本地存储
确认 EdgeOne /wp‑json/* 已经关闭缓存
💡 原理说明
原始逻辑:严格校验浏览器 Origin 必须和 Worker 请求 URL origin 完全一致。CDN 代理环境下两者必然不一致,导致拦截。
修改后:配置在白名单内的域名直接放行,陌生来源依旧保留原始 CSRF 安全校验,不会完全关闭防护,兼顾代理场景与安全性。
📎 可选:正规 TypeScript 类型写法
如果你希望严格类型检查,修改 src/types.ts,给 AppEnv 增加字段:
ts
export interface AppEnv {
DB: D1Database;
JWT_SECRET: string;
TRUSTED_ORIGINS?: string;
// 保留原有全部其它字段
}
修改完成后,auth.ts 代码去掉 as any,直接写 c.env.TRUSTED_ORIGINS。
本文适用于 CFBlog,EdgeOne 反向代理场景,解决后台管理接口跨域鉴权 403。