错误尝试在 Firebase 项目中添加 cors.json 文件。

huangapple go评论94阅读模式
英文:

Error trying to add cors.json file in firebase project

问题

当我尝试将cors.json文件添加到我的Firebase项目时,我遇到了一个错误。

我有一个使用React创建的预算应用,由认证和云Firestore支持,并由Firebase提供。

在我的本地主机上,一切都正常:我登录,添加费用等。但一旦我将我的应用部署到render.com上,我遇到了一个错误:

> 来自来源 'https://bud-app.onrender.com' 对 'https://firestore.googleapis.com/google.firestore.v1.Firestore/Listen/channel?VER=8&database=projects%2Fbudget-app-react-3f8a6%2Fdatabases%2F(default)&RID=2186&CVER=22&X-HTTP-Session-Id=gsessionid&zx=qv2osyi6ocl&t=1' 的 fetch 访问已被 CORS 策略阻止:当请求的凭据模式为 'include' 时,'Access-Control-Allow-Origin' 响应标头的值不能为通配符 '*'。
>
> logger.ts:115 [2023-08-03T17:41:34.095Z] @firebase/firestore: Firestore (9.23.0): 无法连接到 Cloud Firestore 后端。连接失败 1 次。最近的错误:FirebaseError: [code=unavailable]: 无法完成操作。这通常表示您的设备目前没有健康的互联网连接。客户端将在成功连接到后端之前以脱机模式运行。

我尝试的第一个解决方案是通过云Shell终端和编辑器添加 cors.json 文件:

  1. 我创建了具有以下配置的 JSON 文件
[
  {
    "origin": ["*"],
    "method": ["GET", "POST", "DELETE", "PUT"],
    "maxAgeSeconds": 3600
  }
]
  1. 进入终端并输入以下命令,其中 budget-app-react-3f8a6.appspot.com 是我的 firebaseConfig 中的 storageBucket

> gsutil cors set cors.json gs://budget-app-react-3f8a6.appspot.com

然后我收到了一个错误:
> 设置 gs://budget-app-react-3f8a6.appspot.com/ 上的 CORS 时出错...
NotFoundException: 404 指定的存储桶不存在。

然后我尝试使用 gcloud CLI 解决问题。按照文档的步骤进行操作后,我基本上收到了相同的错误:
> gs://budget-app-react-3f8a6 未找到:404。

也许有人能帮助我解决这个CORS问题吗?

英文:

I came accross an error when trying to add cors.json file to my Firebase project.
I have a budget app created with React and powered by authentification and cloud firestore and provided by Firebase.

On my localhost everything works fine: I sign in, add expenses etc. But once I deployed my app to render.com I stumbled onto an error:

> Access to fetch at 'https://firestore.googleapis.com/google.firestore.v1.Firestore/Listen/channel?VER=8&database=projects%2Fbudget-app-react-3f8a6%2Fdatabases%2F(default)&RID=2186&CVER=22&X-HTTP-Session-Id=gsessionid&zx=qv2osyi6ocl&t=1' from origin 'https://bud-app.onrender.com' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.
>
> logger.ts:115 [2023-08-03T17:41:34.095Z] @firebase/firestore: Firestore (9.23.0): Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=unavailable]: The operation could not be completed
This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.

First solution that I tried was to add cors.json file via cloud shell terminal and editor:

  1. I created JSON file with the following config

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

[
  {
    &quot;origin&quot;: [&quot;*&quot;],
    &quot;method&quot;: [&quot;GET&quot;, &quot;POST&quot;, &quot;DELETE&quot;, &quot;PUT&quot;],
    &quot;maxAgeSeconds&quot;: 3600
  }
]

<!-- end snippet -->

  1. Entered terminal and typed command where budget-app-react-3f8a6.appspot.com is my storageBucket in firebaseConfig

> gsutil cors set cors.json gs://budget-app-react-3f8a6.appspot.com

And then I received an error:
> Setting CORS on gs://budget-app-react-3f8a6.appspot.com/...
NotFoundException: 404 The specified bucket does not exist.

Second I tried to solve the problem with gcloud CLI. After following the documentation step-by-step I received basically the same error:

> gs://budget-app-react-3f8a6 not found: 404.

Maybe someone could help me with solving this CORS problem I have?

答案1

得分: 1

错误消息 gs://budget-app-react-3f8a6 未找到:404 意味着您要使用的存储桶不可用。要解决此问题:

  1. 转到您的 Firebase 设置。

  2. 单击您的项目。

  3. 在左侧选择 存储

  4. 选择 浏览器 选项卡。

  5. Bucket 下找到正确的存储桶名称。

如果名称正确,请使用以下终端命令检查存储桶是否存在:

gsutil ls gs://BUCKET_NAME

BUCKET_NAME 替换为您的 Firebase 存储桶的名称。

如果存储桶不存在,请使用 gsutil 工具创建它:

  1. 打开终端。

  2. 输入以下命令安装 gsutil:

pip install gsutil
  1. 创建存储桶:
gsutil mb gs://BUCKET_NAME

BUCKET_NAME 替换为您的 Firebase 存储桶的名称。

一旦存储桶准备好,设置 CORS:

  1. 打开终端。

  2. 导航到包含 cors.json 的文件夹。

  3. 运行此命令:

gsutil cors set cors.json gs://BUCKET_NAME

BUCKET_NAME 替换为您的 Firebase 存储桶的名称。

如果仍然遇到问题,请在 Firebase 设置中的 IAM 和管理员下验证更改 CORS 的权限。

英文:

The error message gs://budget-app-react-3f8a6 not found: 404 means the bucket you want to use isn't available. To fix this:

  1. Go to your Firebase settings.

  2. Click on your project.

  3. Choose Storage on the left.

  4. Select the Browser tab.

  5. Find the correct bucket name under Bucket.

If the name is correct, check if the bucket exists using this terminal command:

gsutil ls gs://BUCKET_NAME

Replace BUCKET\_NAME with your Firebase storage bucket's name.

If the bucket doesn't exist, create it using the gsutil tool:

  1. Open a terminal.

  2. Install gsutil by typing:

pip install gsutil
  1. Create the bucket:
gsutil mb gs://BUCKET_NAME

Replace BUCKET_NAME with your Firebase storage bucket's name.

Once the bucket is ready, set CORS:

  1. Open a terminal.

  2. Navigate to the folder with cors.json.

  3. Run this command:

gsutil cors set cors.json gs://BUCKET_NAME

Replace BUCKET\_NAME with your Firebase storage bucket's name.

If you still face issues, verify your permissions to change CORS in the Firebase settings under IAM & Admin.

huangapple
  • 本文由 发表于 2023年8月4日 02:23:31
  • 转载请务必保留本文链接:https://go.coder-hub.com/76830720.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定