Apollo Client查询报错‘Network error: Failed to fetch’排查方案咨询

通用排查步骤（适用于所有场景） #

不管是普通客户端还是SSR场景，先把这些基础检查做一遍：

• 先查跨域（CORS）配置：这绝对是Top1的原因！GraphiQL和Apollo Server大概率同域运行，所以没跨域问题，但你的React应用如果是另一个端口/域名（比如本地3000 vs Server的4000），浏览器就会拦截请求。打开浏览器DevTools的Network标签，看失败请求的Response Headers里有没有Access-Control-Allow-Origin，值是不是匹配你的客户端域名。如果没有，赶紧给Apollo Server配置CORS——比如用cors中间件，或者在Apollo Server初始化时设置cors: { origin: "你的客户端域名" }。
• 核对请求URL和方法：别小看这个细节！确保Apollo Client配置的uri和GraphiQL用的完全一致，包括http/https、域名、端口、路径（比如有没有多打个斜杠）。另外，Apollo Client默认用POST方法，检查你的Server是否接受POST请求到GraphQL端点——有些开发者可能只给GraphiQL开了GET，没处理POST，这直接会导致请求失败。
• 深挖Network请求详情："Failed to fetch"只是个模糊的提示，打开DevTools的Network标签，找到那个失败的GraphQL请求，看它的状态码（404？500？403？），Response里有没有具体错误信息，Request Headers里有没有漏传认证信息（比如Token）。比如如果是403，那大概率是认证没配置对；404就是URL错了。
• 排查网络环境：如果是本地开发，看看有没有开代理工具（Charles、Fiddler）或者VPN导致请求被拦截。也可以直接在浏览器地址栏访问Apollo Server的端点，能打开GraphiQL或者返回类似{"errors":[{"message":"POST body missing..."}]}的响应，说明网络是通的；要是打不开，那就是网络连接的问题。

SSR场景的额外排查点（针对你的React-Redux SSR应用） #

既然GraphiQL正常，但SSR客户端报错，重点看服务端渲染时的特殊配置：

• 服务端Apollo Client的URI配置：SSR时，服务端会自己发起请求到Apollo Server，这时候的URI和客户端用的可能不一样！比如本地开发时，客户端用http://localhost:4000/graphql，但如果你的SSR服务跑在Docker容器里，localhost指的是容器内部，得改成http://host.docker.internal:4000/graphql；如果是部署到云服务器，要确保服务端能访问到Apollo Server的地址（比如用内部IP而非公网域名）。
• 认证信息的传递：如果你的查询需要认证（比如JWT），SSR时服务端发起请求必须带上客户端的认证信息。检查服务端的Apollo Client实例，是不是在createHttpLink里正确从请求头（比如req.headers.cookie或者req.headers.authorization）获取并设置了headers。要是服务端请求没带认证，被Server拒绝，就会报这个模糊的网络错误。
• 服务端网络权限：如果是部署后的应用，确认SSR服务器有没有访问Apollo Server的权限。比如Apollo Server是内部私有服务，没对外开放，而SSR服务器在公网，那肯定连不上。这时候得配置VPC白名单，或者让Apollo Server允许SSR服务器的IP访问。
• 数据预取时机：确保在SSR阶段（比如Next.js的getServerSideProps/getStaticProps，或者其他SSR框架的预取钩子）执行Apollo查询，而不是等客户端挂载才发起请求。虽然这不一定直接导致网络错误，但如果预取逻辑有问题，也可能间接引发这类报错。

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