VUE3跨域方案-配置代理

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

})