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

Question

我正在尝试将我的 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 时出现错误。

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

1. 同步时钟
2. 验证了 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);     
    }
  }
}

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

Answer 1

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

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

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

Answer 2

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

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

或

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

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