Next.js GraphQL接口执行npx diagnose-endpoint遇自省查询JSON解析错误

这个错误的核心原因是你禁用了Next.js的默认bodyParser，但Apollo Server的createHandler需要依赖已解析的请求体才能处理GraphQL的POST请求，导致无法正确解析JSON格式的请求内容，才抛出了JSON语法错误。

方案一：启用Next.js默认的Body Parser（推荐） #

直接修改你的config配置，移除bodyParser: false或者设为true（默认就是true，也可以直接删掉整个export const config块）：

// 删掉这段配置，或者将bodyParser改为true
// export const config = {
//   api: {
//     bodyParser: false,
//   },
// };

修改后，Next.js会自动帮你解析JSON请求体，Apollo Server就能正常读取请求内容了。

方案二：手动解析请求体（若必须禁用默认Body Parser） #

如果你因为某些原因必须禁用默认的bodyParser，可以手动使用raw-body库解析请求体，再传递给Apollo：

1. 先安装依赖：

npm install raw-body

2. 修改handler函数：

import { server } from "../../graphql/apollo";
import { NextApiRequest, NextApiResponse } from "next";
import Cors from "cors";
import getRawBody from "raw-body";
import type { IncomingMessage } from "http";

const cors = Cors({
  methods: ["POST"],
});

function runMiddleware(
  req: NextApiRequest,
  res: NextApiResponse,
  fn: Function
) {
  return new Promise((resolve, reject) => {
    fn(req, res, (result: any) => {
      if (result instanceof Error) {
        return reject(result);
      }
      return resolve(result);
    });
  });
}

export const config = {
  api: {
    bodyParser: false,
  },
};

const startServer = server.start();

export default async function handler(
  req: NextApiRequest & { body?: any },
  res: NextApiResponse
) {
  res.setHeader("Content-Type", "application/json");

  await runMiddleware(req, res, cors);
  await startServer;

  // 手动解析POST请求的JSON体
  if (req.method === "POST") {
    const rawBody = await getRawBody(req as IncomingMessage);
    req.body = JSON.parse(rawBody.toString());
  }

  await server.createHandler({ path: "/api/graphql" })(req, res);
}

你之前尝试的CORS相关方案无效，是因为这个错误的根本原因不是跨域问题，而是请求体未被解析导致Apollo无法读取GraphQL查询内容。先解决请求体解析问题，CORS的配置才能正常发挥作用。

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