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

})
posted @   Trkly  阅读(247)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示

📖目录