Flutter Web访问Firebase Storage遇CORS拦截：仅桌面浏览器受影响

问题分析 #

你遇到的核心问题是：Flutter Web应用访问Firebase Storage图片时，桌面端Chrome、Safari等浏览器触发CORS错误，但移动端浏览器可正常加载。你的现有CORS配置存在格式错误，导致桌面端严格的CORS校验不通过。

解决方案 #

1. 修正CORS配置的Origin格式 #

你的配置中allow origin: if ["https://myDomain.app/*"]写法不符合Firebase Storage的规则——Firebase Storage不支持在域名后追加/*的通配符格式，正确写法需直接指定域名，或使用子域名通配符：

[
  {
    "origin": ["https://myDomain.app"],
    "method": ["GET"],
    "maxAgeSeconds": 3600,
    "responseHeader": [
      "Authorization",
      "Content-Type",
      "x-firebase-storage-token",
      "x-firebase-storage-download-token"
    ]
  }
]

若需匹配该域名下所有子域名，可将origin改为["https://*.myDomain.app"]。

2. 重新部署CORS配置 #

将修正后的配置保存为cors.json文件，通过以下方式部署到Firebase Storage：

• 使用gsutil工具（需提前安装并配置Google Cloud SDK）：

  gsutil cors set cors.json gs://你的存储桶名称
  

• 或直接通过Firebase控制台的存储桶规则页面，更新CORS配置。

3. 清除桌面端浏览器缓存 #

桌面端浏览器可能缓存了旧的CORS响应头，导致新配置无法生效。按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，或直接清除浏览器缓存后再测试。

4. 确认图片加载方式 #

确保Flutter Web中使用Image.network()加载Firebase Storage图片，而非自定义XMLHttpRequest请求——Image.network()会自动处理跨域逻辑，自定义请求需额外配置CORS相关参数。

移动端正常的原因 #

移动端浏览器的CORS校验机制相对宽松，部分场景下会忽略格式不规范的Origin匹配；同时移动端可能未缓存旧的错误配置，因此能正常加载图片。

内容的提问来源于stack exchange，提问作者Ten Digit Grid