部署Cloudflare Access后的Flutter PWA出现CORS问题求助

问题现象 #

部署Cloudflare Access后，Flutter PWA的服务工作者无法访问manifest.json，控制台抛出CORS错误：

'https://project.cloudflareaccess.com/cdn-cgi/access/login/122d863.project.pages.dev?kid=4075c415d129a4&redirect_url=%2Fmanifest.json&meta=eyJraWc0Mvf9_0ihE4q1jWkWPfWPDwPzfoVMkj3UsrTDMWQX1bW85DfiUv2bwSKXYBTVA'
(redirected from 'https://122d863.project.pages.dev/manifest.json')
from origin 'https://122d863.project.pages.dev' has been blocked by
CORS policy: No 'Access-Control-Allow-Origin' header is present on the
requested resource. If an opaque response serves your needs, set the
request's mode to 'no-cors' to fetch the resource with CORS disabled.

已登录项目，网站其余功能运行正常。

解决步骤 #

1. 配置Cloudflare Pages的CORS规则 #

在Cloudflare控制台操作：

• 进入目标Pages项目 → 规则 → CORS规则
• 创建新规则：
  • 匹配条件：路径等于/manifest.json
  • 允许来源：填入项目域名https://122d863.project.pages.dev
  • 允许方法：勾选GET
  • 开启「允许凭证」选项
  • 保存规则

2. 修改Flutter服务工作者的请求模式 #

若Cloudflare端配置后仍未解决，调整服务工作者获取manifest.json的请求模式：

• 找到Flutter项目中加载manifest的逻辑（通常在自定义服务工作者文件或web端初始化代码里）
• 将请求的mode设为'no-cors'，示例代码：

fetch('/manifest.json', { mode: 'no-cors' })
  .then(res => {
    // 处理不透明响应（仅可用于缓存，无法读取内容）
  });

3. 添加Cloudflare Access跳过规则（可选） #

如果manifest.json无需身份验证，可直接跳过Access校验：

• 进入Cloudflare Access → 应用 → 目标应用 → 规则
• 新增规则，匹配路径为/manifest.json，动作选择跳过，允许所有访问

内容的提问来源于stack exchange，提问作者Bharel