首页
cloudflare技术

CFBlog 使用EdgeOne代理后后台403跨域报错完整修复

CFBlog 使用EdgeOne代理后出现403跨域报错,如何修复?通过修改源码和配置文件,增加信任域名白名单,解决Cookie鉴权请求被拦截的问题。

洛宸

洛宸

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 存储,刷新页面,重新登录后台
🚨 常见报错排查

  1. CI 报错:Invalid TOML document: newlines are not allowed in inline tables
    原因:vars = { ... } 内部换行,TOML 语法不允许。
    解决:把 vars 整行写在同一行,不要换行。
  2. CI 报错:Process completed with exit code 1
    打开 GitHub Actions 工作流日志,查看真实错误:
    要么是 TOML 配置语法错误
    要么是 TS 代码语法写错
  3. 修改完依旧报 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。