由于 CORS 限制，无法使用 firebase 在本地进行测试

Posted 2023-02-22

【中文标题】由于 CORS 限制，无法使用 firebase 在本地进行测试

【英文标题】：Unable to test locally using firebase due to CORS restriction

【发布时间】：2018-09-26 03:07:12

【问题描述】：

我目前的用例很简单，我只需要向我在本地开发的云功能发出一个 post 请求。

关键是，当我开火时

firebase serve

主机部署在 localhost:5000

云功能部署在localhost:5001

这两者来自不同的来源，因为端口不同。因此，当浏览器发送初始预检请求时，它会失败并显示错误消息

Failed to load http://localhost:5001/projectname/region/sendEnquiry: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:5000' is therefore not allowed access.

如何设置标头以在本地进行测试？（再次，我不是专业人士，我猜当我决定在生产中部署时我将具有相同的来源。如果没有，无论如何我仍然需要解决方案）

谢谢。

【参考方案1】：

Google 会限制某些调用，但您可以为您的 firebase 项目配置 CORS。通过非常混乱的文档很难找到如何做到这一点，我花了一段时间才找到正确的方法。

按照以下步骤操作：

转到 console.cloud.google.com 在左上角，选择您的 Firebase 项目 点击左上角的终端图标（看起来像>_） 在打开的终端中，点击三点图标并选择“上传文件” 上传名为 cors.json 的文件，其内容如下：

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

在终端中，运行以下命令： gsutil cors set cors.json gs://yourbucketname.appspot.com（换个网址）

这允许来自其他来源的任何GET 请求。

【参考方案2】：

请注意，服务器和云功能是不同的服务，并且总是位于不同的端口。

CORS 确实是由跨域问题触发的。如果都是本地的，就不应该真的存在跨域违规。

您没有提供有关您客户的任何信息，因此我们无法为您提供客户特定的解决方法。但是有几个 Chrome 扩展允许你禁用 CORS 检查这种本地测试。搜索 Chrome 商店并找到适合您需求的商店。 https://chrome.google.com/webstore/search/cors?hl=en

【讨论】：

客户端是一个运行在 localhost:5000 上的 Angular 应用。除了插件建议外，是否可以在云函数中配置标头？

当域不匹配时，CORS 是本地问题。我不相信无论如何可以从服务器解决这个问题。这是另一个可能为您提供更多详细信息的答案：***.com/questions/42755131/…

【参考方案3】：

使用 Firebase Cloud Functions 模拟器进行本地开发时，CORS 会自动处理，因此您无需编写任何代码来处理它。但是，通常其他问题会在浏览器中显示为 CORS 错误，因为 CORS 所需的飞行前 OPTIONS 请求由于某种原因失败。这有多种可能的原因，包括：

该函数不存在（检查名称是否匹配） 函数抛出一些错误，处理不正确

更多讨论和可能的原因see this thread。