Firebase + Nuxt SSR - httpsCallable 錯誤“未定義標頭”

Question

大家早上好 ！

在 Nuxt 應用程序中使用 Firebase 時，我在調用部署在 Heroku 上的函數 (httpsCallable) 時遇到問題。

從服務器端 (SSR) 調用時會拋出錯誤：

ReferenceError: Headers is not defined
at Service.<anonymous> (/app/node_modules/@firebase/functions/dist/index.node.cjs.js:517:25)
at step (/app/node_modules/@firebase/functions/node_modules/tslib/tslib.js:139:27)
at Object.next (/app/node_modules/@firebase/functions/node_modules/tslib/tslib.js:120:57)
at /app/node_modules/@firebase/functions/node_modules/tslib/tslib.js:113:75
at new Promise (<anonymous>)
at Object.__awaiter (/app/node_modules/@firebase/functions/node_modules/tslib/tslib.js:109:16)
at Service.call (/app/node_modules/@firebase/functions/dist/index.node.cjs.js:508:22)
at /app/node_modules/@firebase/functions/dist/index.node.cjs.js:444:26
at Store.checkToken (server.js:1:31132)
at Array.wrappedActionHandler (/app/node_modules/vuex/dist/vuex.common.js:794:23)

所以我知道 firebase-js 無法在其環境中找到允許它訪問 fetch.Headers 的正確“獲取”，因為渲染是在服務器端進行的，它與客戶端/導航器的環境不同。

所以我嘗試導入“node-fetch”或“whatwg-fetch”或“isomorphic-unfetch”模塊但沒有任何幫助，firebase 無法調用函數。

這種行為在本地不存在，在這種情況下，firebase-js 設法在 SSR 期間發出其 httpsCallable 請求。

在 whatwg-fetch 的全局導入期間，錯誤是：

HttpsErrorImpl: internal
at new HttpsErrorImpl (/app/node_modules/@firebase/functions/dist/index.node.cjs.js:59:28)
at _errorForResponse (/app/node_modules/@firebase/functions/dist/index.node.cjs.js:154:12)
at Service.<anonymous> (/app/node_modules/@firebase/functions/dist/index.node.cjs.js:539:33)
at step (/app/node_modules/@firebase/functions/node_modules/tslib/tslib.js:139:27)
at Object.next (/app/node_modules/@firebase/functions/node_modules/tslib/tslib.js:120:57)
at fulfilled (/app/node_modules/@firebase/functions/node_modules/tslib/tslib.js:110:62) {
code: 'internal',
details: undefined
}

有沒有人遇到過或解決過這個問題？

祝你有美好的一天！

Answer 1

遇到了同樣的問題。 Fetch API今年剛剛在 Node.js 上發布。您可以通過使用node-fetch模塊或像我一樣將您的 Node.js 升級到 17.5 或更新版本來解決這個問題。