Vue 服务器域名与接口不同域名上线后404

最新推荐文章于 2024-06-14 10:39:17 发布

原创最新推荐文章于 2024-06-14 10:39:17 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

vue 爬坑专栏收录该内容

5 篇文章

订阅专栏

本文介绍了解决Vue项目在生产环境中因服务器域名与接口域名不同导致的404错误的方法。通过在prod.env.js中配置API_ROOT基准路径，并在axios请求中添加请求拦截器自动拼接基准路径，解决了跨域问题。

当Vue项目打包上线后
服务器域名与接口域名不同时会报404
这是因为vue在开发环境下，会根据配置好的api自动添加基准路径
而在开发环境下，需要手动配置

在config/prod.env.js添加

module.exports = merge(prodEnv, {
  NODE_ENV: '"production"',
  API_ROOT: '"http://xxxx.xxxxxx.xxx"' // 基准路径
})

在api统一管理的文件内添加拦截器

///request拦截器
axios.interceptors.request.use(req => {
  // 上线环境 添加基准路径
  if (process.env.NODE_ENV == 'production') {
    req.url = process.env.API_ROOT + req.url
  }
  //向请求头添加token
  let token = {
    token: localStorage.getItem('token')
  }
  if (token) {
    req.params = {
      ...req.params,
      ...token
    }
  }
  return req;
}, error => {
  return Promise.reject(error);
})