Vue-cli 封装了axios并且也封装了请求接口前半部分相同的url，这个跟vue跨域 proxy代理的api地址冲突吗

Question

比如说下面是自己封装的请求相同部分的url

export const axiosUrl = 'http:/www.easy-mock.com'

和跨域代理里

proxy: {
        '/apis': {    
            target: 'https:/http:/www.easy-mock.com',  // 接口域名
            changeOrigin: true,  //是否跨域
            pathRewrite: {
                '^/apis': ''  "",
            }              
        }
  }

使用的时候 this.我自己封装的axios 和 这个代理出来的 apis 会不会冲突呀 我使用的时候 是不是 直接用我自己封装的就可以了？

Answer 1

该回答引用GPTᴼᴾᴱᴺᴬᴵ
不会冲突，使用时可以直接使用自己封装的 axios。这是因为，Vue CLI 的开发服务器在代理请求时，会优先匹配 proxyTable 中的规则，如果找到匹配的规则，则将请求转发到对应的目标地址。如果没有找到匹配的规则，则会根据静态资源路径和 API 路径来确定是否存在 API 请求，然后再通过自己封装的 axios 进行发送请求。

在你的代码中，/apis 前缀只是为了表示这个请求是需要通过代理服务器进行转发的，最终实际发送的请求仍是 http:/http://www.easy-mock.xn--com%2C-jb5ft9cvz8bf7lozj134c38ifsdgr8h.xn--%2C-w96az9ueuf3ucf65acupvrcj22brvp/ axios 发送请求时，不需要使用 /apis 前缀，直接使用 http:/http://www.easy-mock.com/ 即可。

举个例子：

import { axiosUrl } from '@/api' // 引入自己封装的 axios 相关配置

export default {
  methods: {
    fetchData() {
      const url = `${axiosUrl}/api/data` // 组合完整的请求 URL
      this.$axios.get(url).then(response => {
        console.log(response.data)
      })
    }
  }
}

上述代码中，我们引入了自己封装的 axios 配置，并使用 ${axiosUrl}/api/data 组合出了完整的请求 URL。在发送请求时，使用了 Vue CLI 默认提供的 $axios 方法进行发送。

希望这些信息能够解决你的问题。