如何排查Web服务器上NodeJS/Nuxt/VueJS应用的Axios 400错误

核心原因说明 #

nuxt generate 执行静态生成时，会在构建阶段自动运行所有页面的 asyncData、fetch 等数据预取钩子，你遇到的400报错就是这个阶段发起的API请求异常导致的。本地正常但服务器报错，最高概率的差异点为环境变量读取异常、API访问权限限制、依赖版本不一致三类，按以下步骤排查即可定位问题：

排查步骤 #

1. 确认构建阶段环境变量是否生效 #

• 先在 nuxt.config.js 顶部添加临时打印代码，输出所有用到的API配置：

  console.log('Airtable API Key:', process.env.AIRTABLE_API_KEY)
  console.log('Google Places API Key:', process.env.GOOGLE_PLACES_API_KEY)
  // 把你项目里用到的所有相关环境变量都加进去打印
  

  服务器上重新执行 npm run generate，核对输出的变量值是否和本地一致，是否存在空值、缺失的情况。
• 注意Nuxt的环境变量读取规则：
  • Nuxt 2默认仅自动注入前缀为 NUXT_ENV_ 的环境变量，其余变量需要在 nuxt.config.js 的 env 配置项中显式声明才会在构建阶段生效
  • Nuxt 3默认仅自动注入前缀为 NUXT_ 的环境变量，私有服务端变量也需要在配置中显式声明
• 确认服务器项目根目录下是否存在 .env 文件，是否被.gitignore等部署规则过滤导致未同步到服务器，以及文件的读取权限是否正常。

2. 打印请求参数定位具体异常接口 #

• 在项目的axios请求配置中添加临时拦截器，打印所有请求的完整信息：

  axios.interceptors.request.use(config => {
    console.log('请求信息：', config.method, config.url, '请求头：', config.headers, '参数：', config.params, config.data)
    return config
  })
  

  重新执行构建，报错前最后打印的请求就是异常请求，直接核对参数是否正确，即可确认是Airtable还是谷歌位置API的问题，400状态码基本都是请求参数缺失、格式错误导致的。

3. 排查服务器API访问权限 #

• 谷歌位置API、Airtable默认都支持IP白名单配置，核对两个API的后台配置，是否仅添加了本地开发设备的IP，未添加DigitalOcean服务器的公网IP，IP不在白名单内会直接返回400/403错误。
• 可以直接在服务器上用curl命令手动模拟两个API的请求，确认是否能正常返回：
  谷歌API测试示例：
  curl "https://maps.googleapis.com/maps/api/place/textsearch/json?query=test&key=替换为你的谷歌API密钥"
  Airtable测试示例：
  curl "https://api.airtable.com/v0/替换为你的baseID/表名" -H "Authorization: Bearer 替换为你的Airtable密钥"

4. 核对环境与依赖版本 #

• 保证服务器的Node.js版本、包管理器版本和本地开发环境完全一致，大版本差异可能导致请求库行为异常。
• 将本地的 package-lock.json 或 yarn.lock 同步到服务器，执行 npm ci 安装完全相同的依赖版本后再重新构建。

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