Vue WebApp上传文件至Firebase Storage遇CORS错误求助

我帮你梳理下这个问题的核心原因和解决方案哈：

你遇到的x-firebase-gmpid请求头不被允许的CORS错误，主要是因为当前的CORS配置存在两个关键遗漏：

• 你用put(file)方法上传文件，这属于PUT请求，但你现有的配置只允许GET、HEAD、DELETE三种方法，完全没包含上传需要的PUT方法
• Firebase Storage在上传过程中会自动携带x-firebase-gmpid这个请求头，而你的responseHeader列表里只配置了Content-Type，没包含这个必要的头

修正后的CORS配置 #

把你的CORS配置改成下面这样，补上PUT方法和对应的请求头：

[
  {
    "origin": ["*"],
    "responseHeader": ["Content-Type", "x-firebase-gmpid"],
    "method": ["GET", "HEAD", "DELETE", "PUT"],
    "maxAgeSeconds": 3600
  }
]

如果想更灵活（比如后续可能有其他自定义头需求），也可以把responseHeader设为["*"]来允许所有响应头。

更新配置的步骤 #

1. 把上面的配置内容保存成一个名为cors.json的文件
2. 打开终端，运行以下命令（记得替换成你自己的Firebase存储桶名称，格式一般是你的项目ID.appspot.com）：

gsutil cors set cors.json gs://<你的存储桶名称>

3. 配置修改后可能需要等待1-2分钟才会生效，建议清除浏览器缓存或者用无痕模式测试上传功能。

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