部署在Firebase的Next.js应用仅POST请求报502网关错误求助

I’ve run into this exact issue before—super frustrating when GET works but POST throws a 502! The root problem is that Firebase Cloud Functions don’t automatically parse request bodies by default, and Next.js’s API routes rely on that parsed req.body to handle POST requests properly. Even though the function is receiving the request, it’s not passing the parsed body along to Next.js, causing an internal failure that leads to the 502.

Here’s how to fix it step by step:

1. Update Your Firebase Function Code #

First, open your Firebase Functions entry file (usually functions/index.js or functions/src/index.js). We need to add body parsing middleware to handle POST request bodies before passing them to Next.js.

Install the body-parser dependency #

Navigate to your functions directory and install the package:

cd functions
npm install body-parser

Modify the function to use body parsing #

Replace your existing function code with this:

const functions = require("firebase-functions");
const next = require("next");
const bodyParser = require("body-parser");

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

// Initialize parsers for common content types
const jsonParser = bodyParser.json();
const urlencodedParser = bodyParser.urlencoded({ extended: true });

exports.nextServer = functions.https.onRequest((req, res) => {
  // Handle POST requests with body parsing
  if (req.method === "POST") {
    const contentType = req.headers["content-type"];
    if (contentType?.includes("application/json")) {
      jsonParser(req, res, () => app.prepare().then(() => handle(req, res)));
    } else if (contentType?.includes("application/x-www-form-urlencoded")) {
      urlencodedParser(req, res, () => app.prepare().then(() => handle(req, res)));
    } else {
      // For other content types (like multipart/form-data), you'd need multer here
      app.prepare().then(() => handle(req, res));
    }
  } else {
    // GET, PUT, DELETE, etc. don't need special parsing here
    app.prepare().then(() => handle(req, res));
  }
});

2. Verify Your firebase.json Configuration #

Make sure your firebase.json has the correct rewrite rule to send all requests to your Next.js function:

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

3. Redeploy and Test #

Deploy your updated function and hosting configuration:

firebase deploy --only functions,hosting

Now send a POST request to your API endpoint again—you should get a 200 response with Method POST supported! as expected.

Note for Multipart/Form-Data Requests #

If you need to handle multipart/form-data (like file uploads), you’ll need to add the multer package instead of relying on body-parser. Install it with npm install multer and configure it similarly in your function code.

内容的提问来源于stack exchange，提问作者Mason