vuecli3 设置proxy代理时，两种写法分别导致404,302重定向，以下代码哪里出错了吗？

Question

我的ip地址是51结尾的
后端地址是54结尾的

第一种：如果我在vue文件里面请求路径这样写，就会出现404的错误，如下图
vue文件

mounted () {
    apiPost('/getUserInit.do', {})
      .then((res) => {
        console.log(res)
      })
  },

疑问的是：请求的地址不应该是后端那个地址吗，为什么是我的ip地址。

第二种写法，就会出现302重定向的问题如下图
vue文件

mounted () {
    apiPost('http://192.168.XX.54:8080/XXX/getUserInit.do', {})
      .then((res) => {
        console.log(res)
      })
  },

一下是关于代理的其他文件的代码。

main.js

// 使用了全局配置的axios 将axios挂载到原型上
Vue.prototype.axios = axios
// 请求默认的域名——跨域配置_配置请求的根路径
axios.defaults.baseURL = '/api'

axios.js

// 自定义一个Axios实例化对象
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  // baseURL:process.env.BASE_URL,
  // baseURL: 'http://192.168.XX.54:8080/XXX',
  // baseURL: '/api',
  baseURL: process.env.VUE_APP_BASE_API,
  // 超时
  timeout: 50000,
  // 设置跨域 Cookie
  withCredentials: true
})

request.js

import http from './axios.js'

export const apiPost = (url, data) => {
  return http({
    baseURL: url,
    method: 'post'
  })
}

vue.config.js

// 跨域问题
  devServer: {
    open: true, // 自动打开浏览器
    // 修复使用hostname访问，就会显示invalid host header。
    disableHostCheck: true,
    // 服务器地址主机名
    // host:'0.0.0.0',
    // 服务器端口号
    // port:'8080/',
    // 配置跨域
    proxy: {
      '/': {
          // 这里后台的地址，
          target: 'http://192.168.XX.54:8080/XXX',
          // 如果要代理websockets
          ws: true,
          // 允许跨域
          changeOrigin: true,
          pathRewrite: {
            // 使用 `/api` 代替 `target` 要访问的跨域的域名
            '^/': ''
          }
      }
    }

以上代码就这样，不知道问题是不是出在前端，我在这几个文件检查，却不知道哪里错了。

Answer 1

export const apiPost = (url, data) => {
  return http({
    baseURL: url,
    method: 'post'
  })
}

你上面这个请求的URL传进来都赋值给baseURL了，没看到有拼接的逻辑，那你传相对地址自然是404的，传绝对地址进去302说明服务是打过去了，但是本身你的访问地址应该有重定向了，感觉不一定是前端请求的问题。
先完善下baseURL + 相对地址的拼接逻辑吧

Answer 2

先说一下使用代理的原因：
因为本地开发的时候，在浏览器中的域名可能是http://localhost:端口号或者http://127.0.0.1:端口号，而我们的后台接口可能是其他的地址，比如你这里提到的http://192.168.XX.54:8080/XXX/getUserInit.do。这明显是不同域的，如果没有特殊处理，肯定会出现跨域，所以我们要通过一种方式，做到访问我们自己开发域名等同于访问真实接口的域名。

这种方式有很多，问题中提到的代理就是最常见的一种处理方式。

假设当前开发页面的URL是：http://localhost:1234，那么我们为了保证不出现跨域来请求接口，那么我们也应该请求的是这个URL，也就是说我们在页面中的请求应该是
http://localhost:1234/XXX/getUserInit.do，但是实际上会通过代理再转换成实际的请求：http://192.168.XX.54:8080/XXX/getUserInit.do。

原因说完，我们再说要满足那几个点才能保证代理是通的

1. axios.create里的baseURL就是接口里的统一前缀/xxx，不需要写后台的真实域名，因为这里会走代理
2. 接口请求的地址域名是页面当前的域名，也就是说apiPost里的地址也是不需要带域名的，因为baseURL已经有接口统一前缀了，所以这里也不需要写统一前缀，只需要写接口的路径就可以了，比如问题中的/getUserInit.do
3. vue.config.js的proxy中，需要通过接口的统一前缀来匹配，大致写法如下：

    proxy: {
      '/xxx': { // 这里就是你要接口固定前缀
          target: 'http://192.168.XX.54:8080',
          ......
      }

满足以上条件后可以再试试看