React 项目出现 Firebase 模拟器 API 密钥错误。

huangapple go评论63阅读模式
英文:

React project has Firebase Emulator ApiKey Error

问题

我最近将我的React项目连接到Firebase模拟器。在生产环境下,应用程序正常运行,但自从切换到模拟器后,它变得不可预测。

当我启动本地模拟器时,我会得到以下错误信息:

POST https://firebaseinstallations.googleapis.com/v1/projects/demo-project/installations 400

FirebaseError: Installations: Create Installation request failed with error "400 INVALID_ARGUMENT: API key not valid. Please pass a valid API key." (installations/request-failed).

以下是我的firebase.js文件中的代码:

const firebaseConfig = {
  apiKey: process.env.REACT_APP_APIKEY,
  authDomain: process.env.REACT_APP_AUTHDOMAIN,
  projectId: process.env.REACT_APP_PROJECTID,
  storageBucket: process.env.REACT_APP_STORAGEBUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGINGSENDERID,
  appId: process.env.REACT_APP_APPID,
  measurementId: process.env.REACT_APP_MEASUREMENTID,
};

const hostname = window.location.hostname;
const app =
  hostname === "localhost"
    ? initializeApp({
        apiKey: "demo-key",
        authDomain: "demo-test",
        projectId: "demo-project",
        storageBucket: "default-bucket",
        appId: "demo-appId",
      })
    : initializeApp(firebaseConfig);

export let auth = getAuth(app);
export let db = getFirestore(app);
export const storage = getStorage(app);
export let functions = getFunctions(app);
export const analytics = getAnalytics(app);

if (hostname === "localhost") {
  connectAuthEmulator(auth, "http://localhost:9099");
  connectFirestoreEmulator(db, "localhost", 8080);
  connectStorageEmulator(storage, "localhost", 9199);
  connectFunctionsEmulator(functions, "localhost", 5001);
}

我尝试了几种配置来解决这个错误,但没有成功,而且没有API密钥,键值对,本地站点无法渲染。欢迎提供任何见解。

英文:

i have recently connected my React project to Firebase emulator. On the production environment, the app worked as it should but since moving to emulator, its unpredictable.

I get the following errors when I start the local emulator:

POST https://firebaseinstallations.googleapis.com/v1/projects/demo-project/installations 400

and

FirebaseError: Installations: Create Installation request failed with error "400 INVALID_ARGUMENT: API key not valid. Please pass a valid API key." (installations/request-failed).

Here is my code in my firebase.js file:

const firebaseConfig = {
  apiKey: process.env.REACT_APP_APIKEY,
  authDomain: process.env.REACT_APP_AUTHDOMAIN,
  projectId: process.env.REACT_APP_PROJECTID,
  storageBucket: process.env.REACT_APP_STORAGEBUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGINGSENDERID,
  appId: process.env.REACT_APP_APPID,
  measurementId: process.env.REACT_APP_MEASUREMENTID,
};

const hostname = window.location.hostname;
const app =
  hostname === "localhost"
    ? initializeApp({
        apiKey: "demo-key",
        authDomain: "demo-test",
        projectId: "demo-project",
        storageBucket: "default-bucket",
        appId: "demo-appId",
      })
    : initializeApp(firebaseConfig);

export let auth = getAuth(app);
export let db = getFirestore(app);
export const storage = getStorage(app);
export let functions = getFunctions(app);
export const analytics = getAnalytics(app);

if (hostname === "localhost") {
  connectAuthEmulator(auth, "http://localhost:9099");
  connectFirestoreEmulator(db, "localhost", 8080);
  connectStorageEmulator(storage, "localhost", 9199);
  connectFunctionsEmulator(functions, "localhost", 5001);
}

I have tried several configurations to resolve this error to no avail and without an apiKey, key/value pair, the local site doesn't render.

Any insights would be appreciated.

答案1

得分: 3

"AFAICT" "API key not valid" isn't thrown by the emulator, which leads me to believe you're calling production.

A few things to check:

  • Ensure you're starting the emulators with demo-project like so:

firebase emulators:start --project=demo-project

  • Make sure your browser's URL is actually "localhost" and not an explicit IP address, since window.location.hostname returns the host based on the browser URL

  • See if the getAnalytics call is causing the problem - there's no emulated Analytics service so this may be calling prod with "demo-project" and will necessarily fail.

英文:

AFAICT "API key not valid" isn't thrown by the emulator, which leads me to believe you're calling production.

A few things to check:

  • Ensure you're starting the emulators with demo-project like so:

firebase emulators:start --project=demo-project

  • Make sure your browser's URL is actually "localhost" and not an explicit IP address, since window.location.hostname returns the host based on the browser URL

  • See if the getAnalytics call is causing the problem - there's no emulated Analytics service so this may be calling prod with "demo-project" and will necessarily fail.

huangapple
  • 本文由 发表于 2023年4月10日 20:29:56
  • 转载请务必保留本文链接:https://go.coder-hub.com/75977141.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定