Flutter Web从Firebase Storage下载图片遇XMLHttpRequest错误求助

问题根源 #

1. 跨域资源共享（CORS）限制：Firebase Storage默认不允许跨域请求，Chrome浏览器会拦截http.get的跨域请求，抛出XMLHttpRequest错误。
2. Web环境API不兼容：path_provider和File类是针对移动端本地文件系统设计的，Flutter Web环境无法直接使用这些API操作本地文件。

解决步骤 #

1. 配置Firebase Storage的CORS规则 #

• 创建名为cors.json的文件，内容如下：

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

  （注：如果需要限制特定域名，可将"*"替换为你的Web应用域名，比如["https://your-web-app.com"]）
• 使用Google Cloud SDK的gsutil工具部署配置：

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

  （替换your-firebase-storage-bucket-name为你的Firebase存储桶名称，可在Firebase控制台的Storage页面查看）

2. 适配Flutter Web的下载逻辑 #

替换原有的下载代码，使用Web端的浏览器下载机制（通过dart:html包实现）：

import 'dart:html' as html;
import 'dart:typed_data';
import 'package:http/http.dart' as http;
import 'package:flutter/foundation.dart' show kIsWeb;
import 'dart:io' show Platform;

Future<void> _download(String _url) async {
  print("START DOWNLOADDD");
  final response = await http.get(Uri.parse(_url));
  print("response done");

  final imageName = _url.split('/').last; // 替代path.basename，避免依赖path包的Web兼容问题

  if (kIsWeb) {
    // Web端下载逻辑
    final blob = html.Blob([response.bodyBytes]);
    final url = html.Url.createObjectUrlFromBlob(blob);
    final anchor = html.AnchorElement(href: url)
      ..setAttribute("download", imageName)
      ..click();

    // 释放资源
    html.Url.revokeObjectUrl(url);
  } else if (Platform.isAndroid || Platform.isIOS) {
    // 保留原有的移动端下载逻辑
    final imageName = path.basename(_url);
    final appDir = await path_provider.getApplicationDocumentsDirectory();
    final localPath = path.join(appDir.path, imageName);
    final imageFile = File(localPath);
    await imageFile.writeAsBytes(response.bodyBytes);
    
    listDownloadPath.add(localPath);
    setState(() {});
  }

  print("download completed");
}

• 说明：Web环境无法直接将文件写入本地文件系统，上述代码通过浏览器的内置下载功能，让用户手动保存文件到本地，符合Web的安全规范。

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