NextJS项目部署/跨设备运行时出现ApolloError 401权限错误

问题详情 #

本地执行npm run dev完全正常，但部署到Vercel或者在其他电脑克隆仓库运行时，直接报Server Error ApolloError: Response not successful: Received status code 401。大概率是.gitignore中未上传的环境变量导致——本地存有认证相关配置，其他环境缺失该配置，请求后端时触发未授权错误。

仓库地址：https://github.com/ThomasTomanec/portfolio-website

完整报错栈：

new ApolloError
file:///C:/Users/student/Desktop/Nov%C3%A1%20slo%C5%BEka/portfolio-website/node_modules/@apollo/client/errors/errors.cjs (33:28)

file:///C:/Users/student/Desktop/Nov%C3%A1%20slo%C5%BEka/portfolio-website/node_modules/@apollo/client/core/core.cjs (1994:78)
both
file:///C:/Users/student/Desktop/Nov%C3%A1%20slo%C5%BEka/portfolio-website/node_modules/@apollo/client/utilities/utilities.cjs (1269:31)

file:///C:/Users/student/Desktop/Nov%C3%A1%20slo%C5%BEka/portfolio-website/node_modules/@apollo/client/utilities/utilities.cjs (1260:72)
new Promise

Object.then
file:///C:/Users/student/Desktop/Nov%C3%A1%20slo%C5%BEka/portfolio-website/node_modules/@apollo/client/utilities/utilities.cjs (1260:24)
Object.error
file:///C:/Users/student/Desktop/Nov%C3%A1%20slo%C5%BEka/portfolio-website/node_modules/@apollo/client/utilities/utilities.cjs (1271:49)
notifySubscription
file:///C:/Users/student/Desktop/Nov%C3%A1%20slo%C5%BEka/portfolio-website/node_modules/zen-observable/lib/Observable.js (140:18)
onNotify
file:///C:/Users/student/Desktop/Nov%C3%A1%20slo%C5%BEka/portfolio-website/node_modules/zen-observable/lib/Observable.js (179:3)
SubscriptionObserver.error
file:///C:/Users/student/Desktop/Nov%C3%A1%20slo%C5%BEka/portfolio-website/node_modules/zen-observable/lib/Observable.js (240:7)

file:///C:/Users/student/Desktop/Nov%C3%A1%20slo%C5%BEka/portfolio-website/node_modules/@apollo/client/utilities/utilities.cjs (1253:68)
Array.forEach

iterateObserversSafely
file:///C:/Users/student/Desktop/Nov%C3%A1%20slo%C5%BEka/portfolio-website/node_modules/@apollo/client/utilities/utilities.cjs (1253:25)
Object.error
file:///C:/Users/student/Desktop/Nov%C3%A1%20slo%C5%BEka/portfolio-website/node_modules/@apollo/client/utilities/utilities.cjs (1333:21)
notifySubscription
file:///C:/Users/student/Desktop/Nov%C3%A1%20slo%C5%BEka/portfolio-website/node_modules/zen-observable/lib/Observable.js (140:18)

解决步骤 #

• 补全Vercel环境变量：登录Vercel控制台找到对应项目，进入「Settings」→「Environment Variables」，将本地.env文件中所有与Apollo相关的变量（如GRAPHQL_API_URL、AUTH_TOKEN等）逐一添加，保存后重新部署项目。
• 添加仓库配置示例：在项目根目录创建.env.example文件，列出所有需要的环境变量名称（不要填写真实敏感信息），并将该文件推送至GitHub。其他克隆仓库的用户可直接复制该文件并重命名为.env，填入对应配置后即可正常运行。
• 检查Apollo配置代码：确认Apollo Client的初始化代码中，是通过process.env.XXX的方式读取环境变量，而非硬编码敏感信息——硬编码会导致换环境后直接失效。

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