Flutter Web开启crossOriginIsolated时Firebase视频下载受阻问题

核心原因分析 #

你遇到的差异本质是图片和视频的跨源请求模式及浏览器校验逻辑不同：

• 用Image.network()加载图片时，浏览器默认以no-cors模式发起请求——这种模式下只要能拿到资源就会渲染，不会强制要求服务器返回跨源响应头，也不允许JS读取图片像素数据（刚好你只是展示图片，没触发严格校验）。
• 而video_player的VideoPlayerController.networkUrl()请求，因为你的场景要把视频传入ffmpeg_wasm的共享缓冲区（依赖crossOriginIsolated环境），浏览器会切换成cors模式发起请求，同时视频加载是分段的（用Range头触发206部分内容响应），这时候浏览器会强制校验跨源资源策略，缺少Cross-Origin-Resource-Policy头就会直接拦截。

解决方案：给Firebase Storage配置跨源响应头 #

你需要给Firebase Storage的视频文件设置Cross-Origin-Resource-Policy响应头，推荐值为cross-origin（如果你的Flutter Web域名和Storage域名不同），下面是三种可行的配置方式：

1. 批量修改已上传视频的响应头（用gsutil） #

这是最直接的方式，适用于已上传的视频文件：

# 替换成你的存储桶地址和视频后缀（比如.mp4/.mov）
gsutil setmeta -h "Cross-Origin-Resource-Policy: cross-origin" gs://your-firebase-bucket/**/*.mp4

2. 设置新上传文件的默认元数据 #

通过Firebase控制台给后续上传的视频自动添加响应头：

• 打开Firebase控制台 → 进入Storage → 点击「规则」标签页
• 找到「默认元数据」区域，点击「添加元数据」
• 键填Cross-Origin-Resource-Policy，值填cross-origin，保存即可

3. 通过Storage规则全局添加响应头 #

如果要对所有资源生效，可修改storage.rules文件：

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      // 保留你原有的读写权限规则
      allow read, write: if request.auth != null;
      
      // 添加跨源响应头
      allow read: if true {
        response.headers.add("Cross-Origin-Resource-Policy", "cross-origin");
      }
    }
  }
}

修改后部署规则即可生效。

额外验证 #

配置完成后，重新发起视频请求，检查响应头中是否存在Cross-Origin-Resource-Policy: cross-origin，同时确认crossOriginIsolated环境正常（可在浏览器控制台输入crossOriginIsolated查看返回值）。

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