VUE3跨域方案：配置代理

vue项目配置代理

vue-cli项目：

vue.config.js中配置：

  devServer: {
    host: '127.0.0.1',
    port: 8084,
    open: true,// vue项目启动时自动打开浏览器
    proxy: {
        '/api': { // '/api'是代理标识，用于告诉node，url前面是/api的就是使用代理的
            target: "跨域的地址", //目标地址，一般是指后台服务器地址
            changeOrigin: true, //是否跨域
            pathRewrite: { // pathRewrite 的作用是把实际Request Url中的'/api'用""代替
                '^/api': "" 
            }
        }
    }
}

axios的文件中配置：

const Axios= axios.create({
baseURL: '/api',
timeout:2000

})

vite-ts项目：

vite.config.ts中配置

server: {
    proxy: {
      '/api': {
        target: 'http://81.68.144.194', // 实际请求地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },

axios的文件中配置：

const Axios= axios.create({
baseURL: '/api',
timeout:2000

})

好了，基本配置就这样，基本能解决跨域问题了，不过能在后端解决的事情，为啥交给前端做呢，是吧！