Nuxt 3部署至Vercel后Notion API令牌无效问题咨询

我正在用Nuxt 3开发Web平台，用Notion官方API做后端，使用的SDK是@notionhq/client。本地localhost:3000运行完全正常，但部署到Vercel后出现以下错误：

WARN @notionhq/client warn: request fail { code: 'unauthorized', message: 'API token is invalid.' }

奇怪的是，本地.env里配置的NOTION_API_KEY和Vercel上设置的环境变量完全一致。

附上我的package.json内容：

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "devDependencies": {
    "@nuxtjs/supabase": "^0.1.16",
    "@nuxtjs/tailwindcss": "^5.1.2",
    "@tailwindcss/forms": "^0.5.2",
    "@tailwindcss/typography": "^0.5.2",
    "nuxt": "3.0.0-rc.4",
    "sass": "^1.53.0",
    "sass-loader": "^10.3.0"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-brands-svg-icons": "^6.1.1",
    "@fortawesome/free-regular-svg-icons": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/vue-fontawesome": "^3.0.1",
    "@headlessui/vue": "^1.6.4",
    "@heroicons/vue": "^1.0.6",
    "@notionhq/client": "^2.2.1",
    "highlight.js": "^11.6.0",
    "vue-gtag-next": "^1.14.0"
  }
}

可能的解决方法 #

1. 检查Vercel环境变量配置细节 #

• 确认NOTION_API_KEY拼写完全正确，无多余空格、大小写错误（Notion令牌大小写敏感）
• 确保变量添加在Vercel的Production环境下，而非仅Preview/Development环境
• 修改变量后手动触发新部署（Vercel不会自动重新部署，需手动操作或推送新代码）

2. 验证Notion令牌权限与有效性 #

• 登录Notion开发者页面，确认令牌未过期，且拥有目标数据库/页面的访问权限
• 检查Notion页面/数据库的分享设置，确保你的集成应用已被添加为协作者

3. 规范Nuxt 3环境变量使用 #

• 若Notion API调用在客户端执行：需给变量加NUXT_PUBLIC_前缀，但强烈不建议——Notion令牌暴露给客户端会引发安全风险
• 正确做法：将API调用放在服务端（如Nuxt的server/api目录、服务端中间件或SSR代码中），此时变量无需NUXT_PUBLIC_前缀，且不会暴露给客户端

4. 清理Vercel缓存重新部署 #

• 在Vercel部署页面选择「Redeploy」，并勾选「Clear build cache and redeploy」，避免旧缓存干扰

5. 升级Nuxt版本 #

• 当前使用的3.0.0-rc.4是早期候选版本，可能存在生产环境变量加载问题，建议升级到稳定版Nuxt 3后重新测试

内容的提问来源于stack exchange，提问作者Thibaud d'Arros