ReactJS连接Firebase Storage遇POST请求失败及CORS策略拦截问题求助

核心原因 #

请求被CORS策略拦截，是因为Firebase Storage未配置允许http://localhost:3000跨域请求的规则，导致预检请求响应不通过。

解决步骤 #

1. 创建CORS配置文件
   在本地创建cors.json文件，内容如下：

[
  {
    "origin": ["http://localhost:3000"],
    "method": ["POST", "GET", "PUT", "DELETE"],
    "maxAgeSeconds": 3600,
    "responseHeader": ["Content-Type", "Authorization"]
  }
]

若需允许其他域名，直接添加到origin数组即可，例如["http://localhost:3000", "https://your-prod-domain.com"]。

2. 部署CORS配置
   确保已安装Firebase CLI，执行以下命令：

• 登录Firebase账户：firebase login
• 进入项目根目录，部署配置：firebase storage:rules:cors set cors.json

3. 验证Storage安全规则
   检查Firebase Storage的安全规则是否允许认证用户上传文件，示例规则（测试环境用，生产需按需调整）：

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

登录功能正常的情况下，该规则可确保认证用户能执行上传操作。

完成以上步骤后，重新尝试上传文件，CORS错误应当解决。

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