Flutter Web调试正常，构建后打开页面卡在启动屏

问题根源 #

你遇到的CORS报错和Firebase无关，核心原因是直接通过file://协议打开本地HTML文件时，浏览器的安全策略禁止跨源请求（file://的请求origin为null，不在浏览器允许的协议列表内）。而调试时Flutter会启动本地HTTP服务器，用http://协议访问，所以不会触发这个限制。

解决方案 #

1. 用本地HTTP服务器托管构建产物（推荐）

这是最标准的解决方式，模拟生产环境的HTTP访问：

• Python 3：打开终端，切换到build/web目录，执行：

  python -m http.server 8000
  

  然后在浏览器访问http://localhost:8000
• Node.js（http-server）：先全局安装工具：

  npm install -g http-server
  

  切换到build/web目录后执行：

  http-server -p 8000
  

  访问http://localhost:8000
• Flutter 自带命令：直接用Flutter运行构建后的产物：

  flutter run -d chrome --release
  

2. 临时修改Chrome启动参数（仅本地测试用）

如果只是临时测试，不想搭服务器，可以修改Chrome启动参数绕过CORS限制：

• 关闭所有Chrome窗口
• 找到Chrome快捷方式，右键选择「属性」
• 在「目标」栏的末尾添加（注意前面有空格）：

  --allow-file-access-from-files --disable-web-security
  

• 启动Chrome后再打开index.html，但这种方式会降低浏览器安全性，不推荐长期使用。

3. Firebase初始化验证（排除后续潜在问题）

虽然本次问题和Firebase无关，但可以确认初始化步骤是否正确：

• 确保Firebase的script标签放在Flutter的main.dart.js加载之前，避免Flutter代码执行时Firebase未初始化
• 检查firebaseConfig中的参数是否和Firebase控制台的配置完全一致

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