客户端 React App 从服务器端生成的 Firestore 模拟器获取

Posted

技术标签:

【中文标题】客户端 React App 从服务器端生成的 Firestore 模拟器获取【英文标题】:Client Side React App fetch from Server Side Generated Firestore Emulator 【发布时间】:2021-01-02 13:03:37 【问题描述】:

我目前有一个已初始化 firebase 的 React 应用程序。我正在使用这样的实用程序文件初始化我的反应应用程序:

import * as firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/storage'

const firebaseConfig = 
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID


firebase.initializeApp(firebaseConfig)

if (window.location.hostname === 'localhost') 
  console.log('testing locally -- hitting local firestore emulators')
  firebase.firestore().settings(
    host: 'localhost:8080',
    ssl: false
  )


export const db = firebase.firestore()
export const storage = firebase.storage()
export default firebase

正如您在上面的代码中看到的,我告诉我的客户端使用 localhost:8080(运行 firestore 模拟器的端口)而不是生产数据库。当我从服务器端运行模拟器时,firestore 模拟器在端口:8080 上成功启动。问题是,在客户端尝试从服务器端生成的模拟器中获取时,我收到以下错误:

FirebaseError: 
false for 'list' @ L5
    at new n (http://localhost:3000/static/js/1.chunk.js:1381:19)
    at http://localhost:3000/static/js/1.chunk.js:12934:18
    at http://localhost:3000/static/js/1.chunk.js:12935:10
    at n.onMessage (http://localhost:3000/static/js/1.chunk.js:12983:6)
    at http://localhost:3000/static/js/1.chunk.js:12846:18
    at http://localhost:3000/static/js/1.chunk.js:12884:29
    at http://localhost:3000/static/js/1.chunk.js:7563:25

这是权限问题吗?如果是这样,有人有解决方案吗?提前致谢

【问题讨论】:

【参考方案1】:

是的,似乎有一条安全规则阻止访问您的数据。 为了确保您可以尝试在您的 firestore.rules 中允许访问所有内容:

rules_version = '2';
service cloud.firestore 
  match /databases/database/documents 
    match /document=** 
      allow read, write: if true;
    
  

要了解有关安全规则的更多信息:https://firebase.google.com/docs/firestore/security/get-started

【讨论】:

以上是关于客户端 React App 从服务器端生成的 Firestore 模拟器获取的主要内容,如果未能解决你的问题,请参考以下文章

react服务端渲染框架

App弱网测试-QNET

React 服务端渲染完美的解决方案

React 服务器端渲染事件侦听器未附加

如何从服务器端 express/mongo/mongoose 中的 URL,客户端的 axios/react/redux 中获取参数 ID

在 React(客户端)中上传 .json 文件并将其发送到 Node(服务器端)