使用angular-apollo graphql客户端时出现404 Not Found错误

这种情况我之前也碰到过，明明在Insomnia里能正常调用GraphQL端点，到了Apollo Client就卡着OPTIONS请求返回404，确实挺闹心的。咱们一步步来排查：

1. 先确认Apollo Client的端点配置是否完全正确 #

• 检查createHttpLink或ApolloClient初始化时的uri字段，是不是和你在Insomnia里用的完全一致？比如Insomnia用的是https://api.yourdomain.com/graphql，你有没有少打尾部的/graphql，或者写错了域名/端口？
• 可以直接在浏览器控制台打印客户端配置验证：

  console.log(apolloClient.link.options.uri);
  

2. 深挖CORS配置的细节（别只停留在"已经配了"） #

虽然你说已经配置了CORS，但大概率是细节没覆盖到：

• 确保服务器允许的Origin和你的前端域名完全匹配：比如前端是http://localhost:3000，服务器不能只写http://localhost，端口号必须带上；如果是生产环境，要对应你的线上域名。
• 明确允许POST方法和GraphQL必需的请求头：比如Express的cors中间件要这么配：

  app.use(cors({
    origin: 'http://localhost:3000', // 替换成你的前端域名
    methods: ['GET', 'POST', 'OPTIONS'],
    allowedHeaders: ['Content-Type', 'Authorization'] // 必须包含application/json对应的Content-Type
  }));
  

• 如果用了反向代理（比如Nginx），要单独处理OPTIONS请求：

  if ($request_method = OPTIONS) {
    add_header Access-Control-Allow-Origin "http://localhost:3000";
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
    add_header Access-Control-Allow-Headers "Content-Type, Authorization";
    return 204; // OPTIONS请求不需要返回实体内容
  }
  

3. 检查Apollo Client的请求链路是否被拦截 #

• 有没有自定义的Apollo Link不小心吞掉了请求？可以加一个日志链路排查请求是否真的发出去：

  import { ApolloLink } from '@apollo/client';
  
  const loggerLink = new ApolloLink((operation, forward) => {
    console.log('准备发送请求:', operation.operationName, operation.variables);
    return forward(operation).map(response => {
      console.log('收到响应:', response);
      return response;
    });
  });
  
  // 把这个日志链路加到你的链路最前面
  const client = new ApolloClient({
    link: ApolloLink.from([loggerLink, httpLink]),
    cache: new InMemoryCache()
  });
  

• 试试禁用浏览器的CORS相关插件、广告拦截器，或者用隐身模式打开页面，排除插件干扰。

4. 确认服务器端的GraphQL路由配置 #

• 确保服务器的GraphQL端点路由和你请求的路径完全一致：比如服务器里是app.use('/graphql', graphqlHTTP(...))，那Apollo Client的uri就必须是/graphql，不能多打斜杠或者写成/api/graphql。
• 有些框架会自动标准化路由（比如去掉尾部斜杠），如果你的请求带了尾部斜杠，而服务器路由没配置，就会返回404。

先从端点匹配和CORS细节查起，这两个是最常见的问题，一般都能解决。

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