Next.js配置带BaseURL的Axios实例部署Vercel后失效问题

核心问题定位 #

部署到Vercel后请求地址拼接错误，本质是API_ROOT环境变量的解析或配置存在问题，导致Axios的baseURL拼接出不符合预期的地址。

排查步骤及解决方法 #

1. 检查环境变量的前缀与配置 #

Next.js客户端代码只能访问前缀为NEXT_PUBLIC_的环境变量。如果你的API_ROOT没有加这个前缀，客户端Axios实例拿到的会是undefined，自动拼接当前页面域名（sandbox.{domain}.com），最终生成错误地址。

• 把环境变量名改成NEXT_PUBLIC_API_ROOT，同时在Vercel的「Settings → Environment Variables」里同步配置这个变量，值设为完整的API根地址：https://api.sandbox.{domain}.com
• 验证：在客户端组件里添加console.log(process.env.NEXT_PUBLIC_API_ROOT)，部署后查看Vercel日志或浏览器控制台，确认变量值正确。

2. 确保API_ROOT是完整URL #

如果环境变量值缺少https://前缀，浏览器会把它当作相对路径，拼接到当前页面的域名后，比如：

• 错误配置：api.sandbox.{domain}.com → 拼接后变成https://sandbox.{domain}.com/api.sandbox.{domain}.com/v1
• 正确配置：https://api.sandbox.{domain}.com → 拼接后是https://api.sandbox.{domain}.com/v1

3. 排查Axios拦截器或配置覆盖 #

检查是否有请求拦截器无意中修改了baseURL或请求路径：

// 示例：拦截器可能导致的问题
instance.interceptors.request.use(config => {
  // 如果这里错误修改了config.baseURL或config.url，会导致地址错误
  return config;
});

如果之前加过类似逻辑，暂时注释掉测试是否恢复正常。

4. 临时硬编码验证 #

如果以上步骤都没解决，先把Axios的baseURL直接写死测试：

const instance = axios.create({
  baseURL: 'https://api.sandbox.{domain}.com/v1',
  withCredentials: true,
});

部署后如果请求正常，说明确实是环境变量的配置问题；如果还是错误，检查是否有Next.js的重写规则（比如next.config.js里的rewrites配置）影响了请求路径。

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