Apollo Server 4配置expressMiddleware后POST /graphql报404

问题核心原因分析 #

你的404错误主要由异步路由注册时机错误、缺失依赖引入、语法错误，以及可能的服务器启动时机不当导致。

具体修复步骤 #

1. 补全缺失的中间件依赖 #

服务加载代码中使用了cors()和json()但未导入，需先安装并引入：

npm install cors

// 在服务加载文件顶部添加
const cors = require('cors');
const { json } = require('express');

2. 修正异步路由注册逻辑 #

你在循环中使用异步IIFE注册GraphQL路由，但如果服务器在异步逻辑完成前就启动，此时/graphql路由尚未注册，会导致404。需将整个服务初始化改为异步流程，确保路由注册完成后再启动服务器：

// 替换原有的服务加载循环
async function initServices() {
  const serviceNames = Object.keys(services);
  for (const name of serviceNames) {
    if (name === "graphql") {
      const server = services[name].server;
      await server.start();
      console.log("GraphQL server initialized, registering route");
      // 修正语法错误：去掉expressMiddleware参数后的多余逗号
      app.use(
        "/graphql",
        cors(),
        json(),
        expressMiddleware(server) // 若需配置context，可添加第二个参数，如{ context: ({ req }) => ({}) }
      );
    } else {
      app.use(`/${name}`, services[name]);
    }
  }
  // 所有路由注册完成后启动服务器
  await new Promise(resolve => httpServer.listen({ port: 4000 }, resolve));
  console.log(`Server ready at http://localhost:4000/graphql`);
}

// 执行初始化并捕获错误
initServices().catch(err => console.error("Service initialization failed:", err));

3. 修复语法错误 #

原代码中expressMiddleware(server, )存在多余逗号，会导致语法解析错误，需删除该逗号。

4. 确认服务器启动逻辑 #

确保你的httpServer.listen()是在所有路由注册完成后才调用，而非在异步路由注册前执行。如果之前的启动代码独立于异步逻辑，必须将其整合到上述异步初始化流程中。

验证方法 #

1. 重启服务器，观察控制台是否输出GraphQL server initialized, registering route和Server ready at http://localhost:4000/graphql
2. 使用浏览器或Postman访问http://localhost:4000/graphql，确认是否能正常加载Apollo Landing Page或处理POST请求

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