Vue项目部署到真实主机后axios的get/post请求异常如何解决

云原生阿岚

2026-10-2

Vue项目部署后axios请求失败解决方案

核心问题原因

你的请求地址硬编码了本地localhost路径，部署到远程服务器后，用户浏览器运行前端代码时，会向用户本地的localhost发起请求，而非你部署后端接口的远程服务器，因此请求失败。
不要在业务代码中硬编码任何环境的绝对域名地址，会导致多环境适配失效

解决方案

方案1：替换绝对路径为相对路径（最便捷）
把请求代码中的绝对地址删除，仅保留路径部分，axios会自动拼接当前前端页面所在的域名/IP，本地开发和生产环境无需额外修改即可适配。
修改前代码：

mounted(){
      axios.get('http://localhost/online-store/src/database_api/Admin/recent_product.php')
      .then((res) => {
          this.products= res.data
          console.log(res.data)
      })
  },

修改后代码：

mounted(){
      axios.get('/online-store/src/database_api/Admin/recent_product.php')
      .then((res) => {
          this.products= res.data
          console.log(res.data)
      })
  },

方案2：配置axios全局基础路径（适合多环境复杂场景）
在项目的axios全局初始化位置添加环境判断，自动切换开发/生产环境的接口域名，统一管理所有请求的前缀：
```
axios.defaults.baseURL = process.env.NODE_ENV === 'development' 
  ? 'http://localhost' 
  : 'https://你实际部署后端服务的域名'
```
配置完成后所有请求都可以直接写路径，无需单独加域名前缀：
```
axios.get('/online-store/src/database_api/Admin/recent_product.php')
```
方案3：跨域问题排查
如果修改路径后仍请求失败，检查是否为跨域导致：本地开发时vue.config.js中配置的devServer代理仅在本地开发服务器生效，生产环境打包后代理失效，需要后端接口配置CORS跨域头，允许前端部署的域名访问接口。