在 Google Firebase Functions 上部署 Next.js 应用程序会导致 304 和 CORS答案

【问题标题】：Deploy Next.js app on Google Firebase Functions results in 304 and CORS在 Google Firebase Functions 上部署 Next.js 应用程序会导致 304 和 CORS
【发布时间】：2022-10-15 06:11:46
【问题描述】：

我对 Firebase 还很陌生，并且有 0 经验。我能够使用 Firebase Functions 部署一个简单的 SSR Next.js 应用程序，但是除了 HTML 之外的所有内容都被阻止了。以下是浏览器控制台错误：

GET https://us-central1-***.cloudfunctions.net/_next/static/chunks/webpack-9b312e20a4e32339.js net::ERR_ABORTED 403
nextSsrServer:1

GET https://us-central1-***.cloudfunctions.net/_next/static/css/1de8f31efe8bff6d.css 403
nextSsrServer:1

GET https://us-central1-***.cloudfunctions.net/_next/static/chunks/framework-a87821de553db91d.js net::ERR_ABORTED 403
nextSsrServer:1

GET https://us-central1-***.cloudfunctions.net/_next/static/chunks/main-fc7d2f0e2098927e.js net::ERR_ABORTED 403
nextSsrServer:1

GET https://us-central1-***.cloudfunctions.net/_next/static/chunks/pages/_app-43ac001d99fedbd3.js net::ERR_ABORTED 403
nextSsrServer:1

GET https://us-central1-***.cloudfunctions.net/_next/static/8-ZWcbwxHaYCZZFwKFxrO/_buildManifest.js net::ERR_ABORTED 403
nextSsrServer:1

GET https://us-central1-***.cloudfunctions.net/_next/static/8-ZWcbwxHaYCZZFwKFxrO/_ssgManifest.js net::ERR_ABORTED 403
nextSsrServer:1

GET https://us-central1-***.cloudfunctions.net/_next/static/media/cats.e6b8b6a4.webp 403
nextSsrServer:1

GET https://us-central1-***.cloudfunctions.net/_next/static/chunks/pages/index-17605d8ecb730db9.js net::ERR_ABORTED 403
nextSsrServer:1

GET https://us-central1-***.cloudfunctions.net/_next/static/8-ZWcbwxHaYCZZFwKFxrO/_middlewareManifest.js net::ERR_ABORTED 403
favicon-32x32.png:1

GET https://us-central1-***.cloudfunctions.net/images/favicon/favicon-32x32.png 403
favicon-16x16.png:1

GET https://us-central1-***.cloudfunctions.net/images/favicon/favicon-16x16.png 403
nextSsrServer:1 Access to manifest at 'https://accounts.google.com/ServiceLogin?passive=true&continue=https://uc.appengine.google.com/_ah/conflogin%3Fstate%3D~AJKiYcHcX7iuuOJqs6nHtkizIgVOAItJqT8PjibW2SPtFq-PnvRkaVn9ZN9Q0P3vl-MbHLVNMpkBlkAHrL6WWQPRdD1D6Tl3LRh00gnbFXWn_4BqQceprDIKpQ4l8qEB4ZLFRkFbezzy8PVwa9HlQZc4Rd1qLVaDfkG0FLQl8xkkQW6JS5ForpHJ98dfnKCtRKA8TqaO2HL0nYNCKKhrytjNJIGRnEf_ipAqwVBEgWbU7Ub_T622fEDBKXXlXNf5gEAqSr5DRXKO'(redirected from 'https://us-central1-***.cloudfunctions.net/images/favicon/site.webmanifest') 
from origin 'https://us-central1-***.cloudfunctions.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
accounts.google.com/ServiceLogin?passive=true&continue=https://uc.appengine.google.com/_ah/conflogin%3Fstate%3D~AJKiYcHcX7iuuOJqs6nHtkizIgVOAItJqT8PjibW2SPtFq-PnvRkaVn9ZN9Q0P3vl-MbHLVNMpkBlkAHrL6WWQPRdD1D6Tl3LRh00gnbFXWn_4BqQceprDIKpQ4l8qEB4ZLFRkFbezzy8PVwa9HlQZc4Rd1qLVaDfkG0FLQl8xkkQW6JS5ForpHJ98dfnKCtRKA8TqaO2HL0nYNCKKhrytjNJIGRnEf_ipAqwVBEgWbU7Ub_T622fEDBKXXlXNf5gEAqSr5DRXKO:1

GET https://accounts.google.com/ServiceLogin?passive=true&continue=https://uc.appengine.google.com/_ah/conflogin%3Fstate%3D~AJKiYcHcX7iuuOJqs6nHtkizIgVOAItJqT8PjibW2SPtFq-PnvRkaVn9ZN9Q0P3vl-MbHLVNMpkBlkAHrL6WWQPRdD1D6Tl3LRh00gnbFXWn_4BqQceprDIKpQ4l8qEB4ZLFRkFbezzy8PVwa9HlQZc4Rd1qLVaDfkG0FLQl8xkkQW6JS5ForpHJ98dfnKCtRKA8TqaO2HL0nYNCKKhrytjNJIGRnEf_ipAqwVBEgWbU7Ub_T622fEDBKXXlXNf5gEAqSr5DRXKO net::ERR_FAILED 200

我尝试了在这里和那里找到的关于 CORS 的解决方案，但没有任何效果。

这是我的 server.js 文件：

const { https } = require("firebase-functions");
const { default: next } = require("next");

const dev = process.env.NODE_ENV !== "production";
const app = next({
  dev,
  conf: { distDir: ".next" },
});

const handle = app.getRequestHandler();
exports.nextSsrServer = https.onRequest((req, res) =>
  app.prepare().then(() => handle(req, res))
);

firebase.json：

{
  "hosting": {
    "public": "out",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "function": "nextSsrServer"
      }
    ]
  },
  "functions": {
    "source": "."
  }
}

.firebaserc：

{
  "projects": {
    "default": "***"
  }
}

任何帮助将不胜感激。 :)

【问题讨论】：

CORS 相当简单。它仅在域不同时才起作用。您从哪个域调用？您的代码返回给客户端的 CORS 标头是什么？

标签： firebase next.js google-cloud-functions server-side-rendering

【解决方案1】：

解决。去谷歌文档，我发现我需要改变这个：

firebase deploy --only 功能

进入这个：

firebase deploy --only 功能，托管“

第一个（错误的）命令给出了一个我不应该只使用的 URL，仅用于功能。

第二个（正确的）实际上生成了我应该使用的正确托管 URL。

不再有 CORS 或任何类型的问题。

【讨论】：

【解决方案2】：

这个问题是关于云功能 v1。如果有人遇到云功能 v2 的 CORS 问题，您需要在 firebase 功能中设置 cors: true。

查看我关于使用 nextjs 和云功能托管 Firebase 的文章：https://yihui.dev/firebase-hosting-with-nextjs-and-cloud-functions

github 示例：https://github.com/yihui-he/firebase-nextjs-example

【讨论】：