Upgrading to NextJS 13.3.0 causes bug where POST requests are not possible to the backend API via proxy

[taylor-lindores-reeves]

Summary

After upgrading to NextJS latest version, and latest canary version, in both cases we cannot make POST requests to our custom API server. No idea why. Really hard to debug, only error is Socket Hang Up on the frontend console.

Additional information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.4.0: Mon Mar  6 20:59:28 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.17.1
      npm: 9.4.0
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.3.0
      eslint-config-next: 13.3.0
      react: 18.2.0
      react-dom: 18.2.0

Example

No response

[taylor-lindores-reeves]

PS I would have created a bug report but it's too lengthy, so I rolled back to NextJS 13.1.6. Don't have the time to file a bug report yet because we are launching this platform which has been a year and a half in the making end of this week!

[msheakoski]

I spent a day tracking down a similar issue that might be related to what you are facing. When upgrading Next.js from 13.2.4 to 13.3.0, requests to my GraphQL API route in dev mode stopped working, giving the error, "POST body missing, invalid Content-Type, or JSON object has no keys" but it worked fine in production behind Cloudflare.

It seems that Next.js 13.3.0 in dev mode somehow rewrites HTTP 1.1 POST requests to API routes in chunked encoding, which means that the "content-length" header is removed and "transfer-encoding" is set to "chunked". It is possible that the POST body is not making it through your proxy because of this.

For anyone else having similar issues with Next.js 13.3.0 and GraphQL API routes, here is how I fixed it:

// pages/api/graphql.ts
import getRawBody from "raw-body"
import schema from "@lib/graphql.schema"
import type { NextApiRequest, NextApiResponse } from "next"
import { ApolloServer } from "apollo-server-micro"

const getApolloServer = (async () => {
  const apolloServer = new ApolloServer({ cache: "bounded", schema })
  await apolloServer.start()
  return apolloServer
})()

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method !== "GET" && req.method !== "POST") {
    return res.status(404).end()
  }

  // Next.js v13.3.0 in dev mode sends POST requests to API routes in chunked encoding. The apollo-server-micro v3
  // package does not understand how to read the GraphQL query from chunked requests. The code can be found in
  // microApollo.ts -> graphqlMicro() -> graphqlHandler(). The request must have a regular body with content-length set
  // or a special property called "filePayload" can be set with the query object as a workaround.
  if (req.headers["transfer-encoding"] === "chunked") {
    ;(req as any).filePayload = JSON.parse((await getRawBody(req)).toString())
  }

  const apolloServer = await getApolloServer
  await apolloServer.createHandler({
    path: "/graphql",
  })(req, res)
}

export const config = {
  api: {
    bodyParser: false,
    externalResolver: true,
  },
}

[saeedghasemi72]

How I must did this in middleware?

[ilia-os]

How I must did this in middleware? @saeedghasemi72

You shouldnt do this in a middleware.
Instead, create an api route handler which will proxy the request.

[saeedghasemi72]

How I must did this in middleware? @saeedghasemi72

You shouldnt do this in a middleware. Instead, create an api route handler which will proxy the request. Example shows pages/api/graphql.ts

I try this, but app directory not work with api route handler in pages

[ilia-os]

I am experiencing the same issue after upgrading from 13.2.4 to 13.3.0
I have a similar use-case:
Graphql API + apolloClient v3.7
Graphql API is behind nextjs rewrite proxy, plus I am using a simple middleware to add extra http header.
While processing, HTTP POST body seems to get lost - and my backend argues about "POST request with empty body" (can't tell what exactly is coming to backend rn)

My code is similar to the doc:

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const requestHeaders = new Headers(request.headers)
  requestHeaders.set('x-version', '13')

  return NextResponse.next({
    request: {
      headers: requestHeaders,
    },
  })
}

// next.config.js
const nextConfig = {
  rewrites: () => [
    {
      source: '/api/graphql',
      destination: `${API_HOST}/graphql`,
    },
  ],
}
module.export = nextConfig

[saeedghasemi72]

I have same issue, any solution?

[Richardvbr]

Experiencing the same issue. Sticking to 13.2.x for now.

[nanzm]

Me too. No solution has been found

[LouisLec]

2 years later, I have the exact same problem with next 15. I can find any doc on rewriting post requests. Did anyone here ended up solving this ?