Firebase 存储 CORS 对预检请求的响应未通过访问控制检查：它没有 HTTP 正常状态

Question

我正在尝试将图像上传到 Firebase 存储。我在 Chrome 的控制台中记录了此错误：

访问 XMLHttpRequest 'https://firebasestorage.googleapis.com/v0/b/%22website-admin-c9ce6.appspot.com%22VITE_APP_VERSION%3D0.0.0/o/MYx2YMuRBwTD1YBzm3UgpV4bpMx1%2F7D45367D-6184-415C-BFC2-9FE85 B5D031B来自源“http://localhost:5173”的 .jpeg' 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：它没有 HTTP 正常状态。

但是，我已经尝试像这样设置 cors 策略，这是在此处的另一个问题中：

1. 创建 cors.json 文件
2. 将其添加到文件中：

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

3. 运行此命令：

   gsutil cors set cors.json gs://website-admin-c9ce6.appspot.com

这是上述命令的输出：

Setting CORS on gs://website-admin-c9ce6.appspot.com/...

。我在 Chrome 中仍然遇到相同的错误，因为图像没有出现在 Firebase 控制台中。

这是我进行存储调用的代码：

const storage = getStorage();

export class StorageClient {
  async uploadFile(file: File) {
    try {
            const fileRef = ref(storage, `${authStore.user!.uid}/${file.name}`)
 const url = await getDownloadURL(fileRef);
 return new DbEditResponse(DbEditStatus.success, url)
    } catch (e) {
        return new DbEditResponse(DbEditStatus.error, 'Error. Did not upload file.')
    }
   
  }
}

Answer 1

我也对这个很头疼。与您相同的错误，使用与OP相同的cors.json，我已将文件上传到我的存储桶https://console.cloud.google.com/storage并通过

gcloud --project=<MY_PROJECT> storage buckets update gs://<MY_PROJECT>.appspot.com --cors-file=cors.json

设置cors配置。

问题是我仍然必须访问 https://console.firebase.google.com/，单击侧面导航栏上的“存储”并完成启用存储步骤。然后我重新部署以更新我的安全规则。直到那时我才不再收到此 CORS 错误。

Answer 2

我和你面临同样的问题。最后找到解决办法了吗？我也尝试了cors.json“解决方案”，但没有成功。