英文:
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 文件:
- 我创建了具有以下配置的 JSON 文件
[
{
"origin": ["*"],
"method": ["GET", "POST", "DELETE", "PUT"],
"maxAgeSeconds": 3600
}
]
- 进入终端并输入以下命令,其中 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:
- I created JSON file with the following config
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
[
{
"origin": ["*"],
"method": ["GET", "POST", "DELETE", "PUT"],
"maxAgeSeconds": 3600
}
]
<!-- end snippet -->
- 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
意味着您要使用的存储桶不可用。要解决此问题:
-
转到您的 Firebase 设置。
-
单击您的项目。
-
在左侧选择
存储
。 -
选择
浏览器
选项卡。 -
在
Bucket
下找到正确的存储桶名称。
如果名称正确,请使用以下终端命令检查存储桶是否存在:
gsutil ls gs://BUCKET_NAME
将 BUCKET_NAME
替换为您的 Firebase 存储桶的名称。
如果存储桶不存在,请使用 gsutil 工具创建它:
-
打开终端。
-
输入以下命令安装 gsutil:
pip install gsutil
- 创建存储桶:
gsutil mb gs://BUCKET_NAME
将 BUCKET_NAME
替换为您的 Firebase 存储桶的名称。
一旦存储桶准备好,设置 CORS:
-
打开终端。
-
导航到包含 cors.json 的文件夹。
-
运行此命令:
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:
-
Go to your Firebase settings.
-
Click on your project.
-
Choose
Storage
on the left. -
Select the
Browser
tab. -
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:
-
Open a terminal.
-
Install gsutil by typing:
pip install gsutil
- 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:
-
Open a terminal.
-
Navigate to the folder with cors.json.
-
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论