从Firebase存储下载视频时触发XMLHttpRequest错误的问题排查

核心原因及解决方案 #

1. 配置Firebase Storage CORS规则 #

Web端跨域请求被浏览器拦截是常见原因，即使读写权限设置为true，仍需配置CORS允许跨域GET请求：

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

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

• 安装Google Cloud SDK（确保gsutil命令可用），执行命令上传配置到你的bucket：

  gsutil cors set cors.json gs://aishortclipper.appspot.com
  

2. 使用Firebase官方插件下载（推荐） #

直接用firebase_storage插件替代http包，避免Web端XMLHttpRequest的兼容性问题：

import 'package:firebase_storage/firebase_storage.dart';
import 'package:path_provider/path_provider.dart';
import 'dart:io';

onTap: () async {
  // 直接通过Storage引用定位文件，无需拼接URL
  final storageRef = FirebaseStorage.instance.ref()
      .child('6wXLQCzdxDb4W1gJ4CcvDAy52MH3/1/Untitled.mov');
  final docDir = await getApplicationDocumentsDirectory();
  final file = File(path.join(docDir.path, "cropVideo.mp4"));
  
  // 写入文件到本地
  await storageRef.writeToFile(file);
  
  Navigator.of(context).push(
    MaterialPageRoute(
      builder: (context) => Crop(file: file)
    )
  );
},

3. 调整http包的Web端请求方式 #

如果坚持使用http包，改用dart:html的Blob处理方式，绕过XMLHttpRequest限制：

import 'dart:html' as html;
import 'dart:typed_data';
import 'package:path_provider/path_provider.dart';
import 'dart:io';

onTap: () async {
  final response = await html.HttpRequest.request(
    "https://firebasestorage.googleapis.com/v0/b/aishortclipper.appspot.com/o/6wXLQCzdxDb4W1gJ4CcvDAy52MH3%2F1%2FUntitled.mov?alt=media&token=29c5cdbc-0f00-435a-9110-5286e5cd889b",
    responseType: "blob",
  );
  
  final blob = response.response as html.Blob;
  final reader = html.FileReader();
  reader.readAsArrayBuffer(blob);
  await reader.onLoad.first;
  
  final bytes = reader.result as Uint8List;
  final docDir = await getApplicationDocumentsDirectory();
  final file = File(path.join(docDir.path, "cropVideo.mp4"));
  file.writeAsBytesSync(bytes);
  
  Navigator.of(context).push(
    MaterialPageRoute(
      builder: (context) => Crop(file: file)
    )
  );
},

4. 验证URL有效性 #

先手动在浏览器中打开下载URL，确认：

• 文件可正常访问
• Token未过期
• URL编码无错误（比如路径中的%2F是正确的转义）

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