客户端 React App 从服务器端生成的 Firestore 模拟器获取
Client Side React App fetch from Server Side Generated Firestore Emulator
我目前有一个已初始化 firebase 的 React 应用程序。我正在使用如下实用程序文件初始化我的 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 模拟器所在的端口 运行ning)而不是生产数据库。当我从服务器端 运行 模拟器时,firestore 模拟器在 port: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
这是权限问题吗?如果是这样,有人有解决办法吗?提前致谢
是的,似乎有安全规则阻止访问您的数据。
为确保您可以尝试允许访问所有内容,请在 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
我目前有一个已初始化 firebase 的 React 应用程序。我正在使用如下实用程序文件初始化我的 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 模拟器所在的端口 运行ning)而不是生产数据库。当我从服务器端 运行 模拟器时,firestore 模拟器在 port: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
这是权限问题吗?如果是这样,有人有解决办法吗?提前致谢
是的,似乎有安全规则阻止访问您的数据。
为确保您可以尝试允许访问所有内容,请在 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