生产环境Apollo Client仅本地运行时可执行GraphQL查询求助

部署在Netlify的生产环境网站（https://socialvc.netlify.app/），仅在本地同时运行localhost:3000服务时，页面的GraphQL查询才能正常显示。尝试三种Apollo Client配置（仅本地地址、环境变量区分生产/本地地址、仅生产地址）后，仅第一种配置生效，但必须依赖本地服务运行。技术栈为Next.js、GraphQL、ApolloClient、Prisma、PostgreSQL，已配置CORS但问题仍存在。

1. 检查Netlify上API路由的部署状态 #

Next.js的/api/graphql路由需在Netlify上正确构建部署：

• 查看部署日志，确认无API路由相关编译或部署错误
• 直接访问https://socialvc.netlify.app/api/graphql，检查是否能返回GraphQL响应（如Playground界面或正确响应头）

若直接访问无响应，需排查：

• pages/api/graphql.ts（或.js）文件路径是否正确
• 构建命令是否包含prisma generate（Netlify部署时需生成生产环境Prisma客户端，可在package.json的build脚本中添加npx prisma generate && next build）

2. 优化Apollo Client的生产环境配置 #

避免硬编码域名，使用相对路径让浏览器自动适配当前环境：

const client = new ApolloClient({
  uri: '/api/graphql', // 相对路径自动适配本地/生产域名
  cache: new InMemoryCache(),
});

这种方式无需手动区分环境，本地开发时自动指向localhost:3000/api/graphql，生产环境自动指向Netlify域名下的对应接口。

3. 修正CORS配置中的问题 #

当前CORS配置存在冗余和冲突，调整如下：

const apolloServer = new ApolloServer({
  typeDefs,
  resolvers,
  playground: process.env.NODE_ENV !== 'production', // 生产环境建议关闭Playground
});
const startServer = apolloServer.start();

export default async function handler(req, res) {
  // 若无需携带凭证，移除Access-Control-Allow-Credentials（*和true不能同时生效）
  // res.setHeader("Access-Control-Allow-Credentials", "true");
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  res.setHeader(
    "Access-Control-Allow-Methods",
    "POST, GET, OPTIONS"
  );
  
  if (req.method === "OPTIONS") {
    res.status(200).end(); // 返回200状态码而非直接end()
    return;
  }
  
  await startServer;
  await apolloServer.createHandler({
    path: "/api/graphql",
  })(req, res);
}

4. 检查Netlify重写/重定向规则 #

查看netlify.toml文件，确保没有影响/api/*路径的重写规则，避免API请求被错误重定向到静态资源。

5. 验证生产环境请求 #

打开浏览器开发者工具的Network面板：

• 确认GraphQL请求的URL为https://socialvc.netlify.app/api/graphql
• 检查是否存在CORS、404、500等错误状态码
• 查看响应内容，定位具体错误信息

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