Flutter Web桌面端Firebase Storage图片无法显示如何排查

问题背景 #

• 开发栈：Flutter Web，接入Firebase全栈服务，站点通过Firebase Hosting托管，已绑定自定义域名
• 异常表现：Firebase Storage中存储的图片，在安卓端Chrome浏览器可正常展示，桌面端所有浏览器均加载失败
• 初始误判：认为同属Firebase生态的托管服务与存储服务不会触发CORS跨域限制，无法定位故障根因

现象截图 #

桌面端异常效果 #

移动端正常效果 #

根因说明 #

故障本质是Firebase Storage未配置对应自定义域名的CORS放行规则。
移动端Chrome对跨域图片类静态资源的CORS校验逻辑比桌面端宽松，即使响应头缺少合法的Access-Control-Allow-Origin字段，也会正常渲染图片；桌面端浏览器执行严格的W3C跨域校验规则，会直接拦截不符合要求的跨域资源。
注意：Firebase Hosting与Firebase Storage属于两个独立的服务模块，即使同属一个项目，Storage默认的CORS规则仅自动放行Firebase分配的web.app/firebaseapp.com默认托管域名，不会自动识别放行你绑定的自定义域名，必然会触发跨域拦截。

修复步骤 #

1. 本地新建名为cors.json的配置文件，写入如下规则，替换为你自己的域名和本地调试地址：

[
  {
    "origin": ["https://你的自定义域名", "http://localhost:你本地调试用的端口"],
    "method": ["GET", "HEAD"],
    "maxAgeSeconds": 3600
  }
]

2. 本地安装gcloud CLI工具，完成账号登录与项目初始化，关联你当前使用的Firebase项目
3. 在cors.json所在目录执行如下命令，将CORS规则下发到对应存储桶：

gcloud storage buckets update gs://你的Firebase存储桶全称 --cors-file=cors.json

4. 清空桌面端浏览器缓存（或强制刷新页面跳过缓存），即可看到图片正常加载。

快速验证技巧：打开桌面端浏览器开发者工具的Console面板，如果看到No 'Access-Control-Allow-Origin' header is present on the requested resource类报错，可直接确认是CORS配置问题，无需排查其他代码逻辑。

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