Vercel部署的前端应用Axios请求URL拼接错误求助

1. 确认Vite环境变量的取值方式 #

Vite环境变量必须通过import.meta.env获取，而非process.env（Webpack的取值方式）。确保Axios实例的baseURL配置代码如下：

import axios from 'axios';

const apiClient = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  // 其他配置项（如超时时间、请求头等）
});

export default apiClient;

2. 检查环境变量值的格式 #

在Vercel等部署平台配置的VITE_API_URL必须是完整的绝对URL，以http://或https://开头，例如：
https://your-backend-service.up.railway.app
如果变量值是相对路径（如/api）或未填写完整域名，Axios会自动拼接当前前端域名，导致请求URL变成[Vercel域名]/[变量值]。

3. 验证环境变量是否正确注入 #

• 本地创建.env文件，写入VITE_API_URL=https://your-railway-backend.up.railway.app，启动开发服务器后，在控制台打印console.log(import.meta.env.VITE_API_URL)，确认输出正确的绝对URL。
• 部署平台修改环境变量后，必须触发重新构建部署，避免使用缓存的旧构建结果。

4. 排查vercel.json的干扰 #

如果vercel.json中配置了rewrites或redirects规则，确保没有将绝对URL的API请求重写到前端域名下。例如，避免类似以下可能导致路径混淆的规则：

{
  "rewrites": [
    { "source": "/api/(.*)", "destination": "/api/$1" }
  ]
}

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