Axios请求路径被注入localhost:3000致404，原因是什么？

出现这种问题通常是以下几种原因导致的：

• 请求地址被识别为相对路径
  尽管你定义了完整的REFERRAL_API_URL，但如果在拼接接口路径时出现错误（比如变量引用失败、字符串拼接语法错误），Axios会把referrals.gen.com/api/ReferralMasters当成相对路径，自动拼接当前页面的域名（也就是localhost:3000）。另外要确认REFERRAL_API_URL确实以https://开头，缺少协议头的URL会被Axios判定为相对路径。

• Axios全局/实例配置了baseURL
  如果你给Axios全局设置了baseURL: 'http://localhost:3000'，或者创建的Axios实例带有这个baseURL配置，当请求地址没有被识别为完整URL时，Axios会自动把baseURL和你传入的路径拼接起来，就会出现https://localhost:3000/referrals.gen.com/api/ReferralMasters这种错误地址。

• 环境变量或配置加载异常
  如果你是通过环境变量定义REFERRAL_API_URL，可能存在环境变量未正确加载的情况，导致实际代码中该变量值为空或错误，Axios只能用baseURL来拼接请求路径。

排查步骤 #

1. 在调用createReferral前打印REFERRAL_API_URL的值，确认它确实是https://referrals.gen.com，没有被意外修改。
2. 检查Axios的全局配置或实例配置，看是否存在baseURL: 'http://localhost:3000'的设置。如果有，确保请求时传入的是完整URL，或者调整实例配置。
3. 核对请求拼接代码，确保语法正确：

   // 正确写法：使用完整URL拼接
   axios.post(`${REFERRAL_API_URL}/api/ReferralMasters`)
   

   避免出现不带协议头的路径写法，比如axios.post('referrals.gen.com/api/ReferralMasters')。

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