NextJS项目使用apollo-server-micro时Apollo Studio CORS无法连接服务器问题

问题根因 #

1. 最初的Apollo Studio连接失败是接口未配置跨域规则，Apollo Studio的域名被浏览器同源策略拦截。
2. 调整代码后出现的报错：

API resolved without sending a response for /api/graphql, this may result in stalled requests.
核心原因是你直接将apolloServer.start()返回的Promise作为导出值，而Next.js API路由要求导出的是标准请求处理函数，导致Next.js判定接口未返回响应。

完整可运行修复代码 #

import { ApolloServer } from "apollo-server-micro";
import { typeDefs } from "./schemas";
import { resolvers } from "./resolvers/index";
import { createContext } from "./db/context";
import cors from "micro-cors";

// 配置CORS规则，仅允许Apollo Studio域名访问，按需可调整允许的源
const corsHandler = cors({
  origin: "https://studio.apollographql.com",
  allowMethods: ["GET", "POST", "OPTIONS"],
  allowHeaders: ["Content-Type", "Authorization"],
  credentials: true,
});

const apolloServer = new ApolloServer({
  typeDefs,
  resolvers,
  context: ({ res, req }) => createContext(res, req),
  uploads: false,
  introspection: true, // 生产环境需要保留该配置，Studio才能读取接口schema
  formatError: (error) => {
    console.log(error);
    return error;
  },
});

// 预启动Apollo Server，避免每次请求重复初始化
const serverStartPromise = apolloServer.start();

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

// 导出标准Next.js API处理函数
export default corsHandler(async (req, res) => {
  // 直接处理OPTIONS预检请求
  if (req.method === "OPTIONS") {
    res.status(200).end();
    return;
  }
  // 等待Server启动完成后交给Apollo handler处理请求
  await serverStartPromise;
  const apolloHandler = apolloServer.createHandler({ path: "/api/graphql" });
  return apolloHandler(req, res);
});

额外配置说明 #

• 本地开发测试时可将origin改为*允许所有跨源请求，生产环境建议严格限定允许的域名
• 若接口不需要身份凭证校验，可移除credentials: true配置，此时origin允许设置为*
• 生产环境如果不需要Apollo Studio访问，可将introspection设为false降低 schema 泄露风险

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