Next.js Apollo Client请求GitHub GraphQL API报401如何解决

该401错误与CORS无关，核心原因是Next.js的环境变量暴露规则限制：
Next.js 中仅名称以 NEXT_PUBLIC_ 为前缀的环境变量，才会被打包注入到客户端侧代码中。你当前代码中读取的 process.env.GITHUB_ACCESS_TOKEN 在浏览器端运行时值为 undefined，实际发往GitHub API的请求未携带有效认证凭证，因此返回401状态码。
这也完全匹配你观察到的现象：getServerSideProps 运行在服务端环境，可以读取所有环境变量，因此相同凭证在服务端请求可以成功；替换为无需认证的公开API时，客户端逻辑不需要凭证也能正常运行。

• 打开浏览器开发者工具，定位到发往 https://api.github.com/graphql 的请求，查看请求头的 Authorization 字段，会发现字段缺失或值为 Bearer undefined
• 在 setContext 回调中打印 process.env.GITHUB_ACCESS_TOKEN，客户端侧运行时输出结果为undefined

注意：将GitHub访问令牌直接暴露到客户端侧存在严重安全风险，所有访问你站点的用户都可以从前端代码中提取到令牌，可能被恶意滥用导致账号异常，生产环境强烈不建议使用客户端直连的方式。

方案1（生产环境推荐，安全）：通过服务端代理请求 #

不要从客户端直接请求GitHub GraphQL API，将请求逻辑放到服务端执行：

• 页面首屏数据通过 getServerSideProps 或 getStaticProps 在服务端拉取后作为props传递给组件
• 客户端动态请求通过Next.js的API Route实现代理：客户端请求自有服务端的API接口，由服务端携带有效令牌请求GitHub API，再将结果返回给前端

方案2（仅本地测试/内部工具使用，不安全）：调整环境变量前缀 #

如果仅用于本地调试、无公网开放需求，可以将环境变量重命名为 NEXT_PUBLIC_GITHUB_ACCESS_TOKEN，同时修改Apollo客户端配置中的变量引用：

// apollo-client.js
const authLink = setContext((_, { headers }) => {
  return {
    headers: {
      ...headers,
      authorization: `Bearer ${process.env.NEXT_PUBLIC_GITHUB_ACCESS_TOKEN}`,
    },
  };
});

修改完成后重启Next.js开发服务，客户端即可正常读取到令牌值完成认证。

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