Flutter Web中Firebase Storage getData报XMLHttpRequest错误求助

问题场景 #

我编写了如下Dart代码用于Firebase Storage的文件读写：

const String _csvFolder = "CSV_files/";
const String _reportFolder = "Report_files/";

Future<bool> writeFiles(
    String uuid, Uint8List csvBytes, Uint8List reportBytes) async {
  Reference csvFileRef = FirebaseStorage.instance.ref(_csvFolder + uuid);
  Reference reportFileRef = FirebaseStorage.instance.ref(_reportFolder + uuid);
  try {
    await csvFileRef.putData(csvBytes);
    await reportFileRef.putData(reportBytes);
    var test = await FirebaseStorage.instance.ref(_csvFolder + uuid).getData();
    return true;
  } catch (ex) {
    return false;
  }
}

配套的Firebase Storage规则为完全公开：

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if true;
    }
  }
}

异常现象 #

• 文件写入代码await csvFileRef.putData(csvBytes);和await reportFileRef.putData(reportBytes);可正常执行，且能在Firebase存储控制台看到文件。
• 执行读取代码var test = await FirebaseStorage.instance.ref(_csvFolder + uuid).getData();时触发XMLHttpRequest异常。
• 使用命令flutter run -d chrome --web-browser-flag "--disable-web-security"运行应用时，读取功能可正常工作。

解决方法 #

1. 创建CORS配置文件 #

新建一个名为cors.json的文件，填入以下内容：

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

说明：如果需要限制仅允许特定域名访问，将"*"替换为你的应用域名数组，例如["https://your-app-domain.com", "http://localhost:53524"]（localhost端口根据你的实际开发环境调整）。

2. 用Firebase CLI配置CORS规则 #

• 确保已安装Firebase CLI并完成登录（未安装可通过npm install -g firebase-tools安装，登录用firebase login）。
• 在终端执行以下命令，替换your-bucket-name为你的Firebase Storage存储桶名称（可在Firebase控制台存储页面获取）：

firebase storage:rules:set cors.json gs://your-bucket-name

配置完成后，重启应用即可正常读取Firebase Storage中的文件，无需再禁用web安全。

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