1、在vue.config.js文件中配置webpack

// 跨域配置
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    devServer: {
      proxy: {
        "/api": {//捕获API的标志，如果API中有这个字符串，那么就开始匹配代理，
          target: "http://localhost:8090/",//代理的api地址，就是要跨域的地址
          changeOrigin: true,// 这个参数可以让target参数是域名
          ws: true,//是否启用websockets，用不到可设为false
          pathRewrite: {//对路径匹配到的字符串重写
            "^/api": "",
          },
        },
      },
    },
  },
});

2、在main.js中设置axios

import axios from "axios"
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App);
app.mount('#app')

//设置axios请求的地址默认是'/api'
axios.defaults.baseURL = "/api";

//将axios挂载到原型对象上
app.config.globalProperties.$http = axios;

3、使用

配置结束，这样就可以使用后端不同域发来的请求了

//此处会拼接成/api/user/login，等效于与后端http://localhost:8090/user/login
this.$http.post("user/login").then((res) => {
   console.log(res);
}) .catch((res) => {
    console.log(res);
});

喜欢的给个赞吧！