NextJS中Axios实例配置问题：Vercel部署后服务端预取数据失败

问题分析 #

你的axios配置在本地和自建生产环境正常，但Vercel部署后报错，核心问题出在Vercel环境变量的取值逻辑和服务端调用自身API的端口/协议处理：

1. Vercel上process.env.VERCEL_URL仅返回域名（如your-project.vercel.app），不带协议前缀
2. process.env.NODE_PORT在Vercel Serverless环境中不会被设置为443，而是平台内部分配的随机端口，导致协议判断错误
3. 硬编码端口逻辑不适用于Vercel的托管环境

修正后的axios配置方案 #

直接针对Vercel环境做适配，同时保留本地开发的兼容性：

import axios from 'axios';

const getApiBaseUrl = () => {
  // 客户端直接用相对路径
  if (typeof window !== 'undefined') {
    return '/api';
  }

  // Vercel生产环境：VERCEL_URL自带域名，强制用HTTPS
  if (process.env.VERCEL_URL) {
    return `https://${process.env.VERCEL_URL}/api`;
  }

  // 本地开发环境：默认NextJS端口3000，用HTTP
  return 'http://localhost:3000/api';
};

export const http = axios.create({ baseURL: getApiBaseUrl() });

更优方案：直接调用API路由函数（避免HTTP请求） #

服务端预取时，没必要走HTTP请求转发，直接导入API路由的处理函数调用，既高效又规避环境变量问题：

比如你有pages/api/external-data.js的API路由：

// pages/api/external-data.js
export default async function handler(req, res) {
  const externalData = await fetch('https://external-api.com/data');
  const data = await externalData.json();
  res.status(200).json(data);
}

// 导出核心逻辑供服务端直接调用
export async function fetchExternalData() {
  const externalData = await fetch('https://external-api.com/data');
  return externalData.json();
}

然后在服务端预取（比如getServerSideProps）里直接调用：

// pages/your-page.js
import { fetchExternalData } from '../pages/api/external-data';

export async function getServerSideProps() {
  const data = await fetchExternalData();
  return { props: { data } };
}

额外排查点 #

1. 确认Vercel项目的环境变量是否正确配置：在Vercel Dashboard的项目Settings → Environment Variables中检查是否有需要的变量
2. 查看Vercel的函数日志：在Dashboard的Functions页面，找到对应的API路由函数，查看详细错误信息（可能原日志没显示全，这里能看到完整报错）

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