@firebase/firestore：Firestore (8.6.2)：无法访问 Cloud Firestore 后端（React Js）

Posted 2023-03-04

【中文标题】@firebase/firestore：Firestore (8.6.2)：无法访问 Cloud Firestore 后端（React Js）

【英文标题】：@firebase/firestore: Firestore (8.6.2): Could not reach Cloud Firestore backend (React Js)

【发布时间】：2021-08-13 10:25:04

【问题描述】：

我正在尝试将我的 react js 应用程序与 Firebase Firestore 连接，但出现以下错误，如图所示 error image 我在集合中有 2 个文档，但我得到一个空数组您可以在控制台中看到。这是我用来获取 Firestore 数据的代码

const snapshot = await firebase.firestore().collection('users').get();
const data = snapshot.docs.map((doc) => doc.data());
console.log(data);

PS：我能够正确使用 firebase 中的 auth 功能，但使用 firestore 时出现错误。

到目前为止我尝试过的解决方案：

同步时钟 验证了 firebase 规则并确保允许读写（附上我在 firestore 规则部分找到的规则）

rules_version = '2';
service cloud.firestore 
  match /databases/database/documents 
    match /document=** 
      allow read, write: if 
          request.time < timestamp.date(2021, 6, 23);     
    
  

自从昨晚以来我一直在苦苦挣扎，正在寻找一些快速的解决方案。提前致谢。

【参考方案1】：

我尝试了以下步骤来确认 react 应用程序或浏览器存在问题并修复了问题。

尝试使用 node 和 express 获取数据并将数据发布到 firestore 脚本（这有助于发现问题不在于 firebase 配置）

经过一些在线研究后，我尝试将浏览器从 Brave 更改为 Chrome 确实有效。

【讨论】：

我注意到有一个额外的斜杠 ('/') 附加到存储在 .env 文件中的项目 ID 变量中，并且由于该 firebase 无法获取项目 ID。

【参考方案2】：

屏幕截图中的第一个错误暗示这实际上是Access-Control-Allow-Origin CORS 问题。因此，如您在this article 中看到的那样，为了修复它，您可以：

将"proxy": "http://localhost:PORT_YOU_ARE_USING" 选项添加到您的package.json 文件中；

或

使用像 http-proxy-middleware 这样的中间件来代理请求，你可以按照文章中的例子来做。

你也可以看看这个community question，它与你的问题相似，并提供了一些其他的解决方案。通过查看它，您可能会更好地了解 React 中的 cors 问题。

【讨论】：

感谢您的建议，我已经在浏览器中启用了 cors 插件。我最近在屏幕截图中观察到那里提到的时间戳和我的系统时间不同步。是因为这个问题吗？

不就是时区不同吗？我认为这不是问题的原因，但您可以通过暂时删除 request.time 规则来测试它。

抱歉，我刚试过，但没有帮助。

我不明白为什么 auth 功能正常工作并且没有显示任何 CORS 错误，但是即使它们在同一个应用程序中，firestore 也会给我 CORS 错误。

我认为 Auth 不会进行任何 cors 检查，这就是原因，但回到您的第一条评论，I'm already having the cors plugin enabled in my browser 是什么意思？您是否尝试像我的回答中提到的那样自己申请请求？我认为那里有区别。