vue3通过vite.config.js通过代理配置跨域

最新推荐文章于 2026-04-25 16:19:42 发布

原创最新推荐文章于 2026-04-25 16:19:42 发布 · 1.8k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #vue.js

收录于

毕设专栏收录该内容

1 篇文章

订阅专栏

当前端使用vite.config.js配置跨域并结合封装的axios时，可能因baseUrl导致代理失效。要解决此问题，需删除axios的baseUrl设置。在vite.config.js中，配置了针对/api/*的代理，目标为http://localhost:3000/，并开启changeOrigin以允许跨域，同时重写路径去除/api前缀。

前端通过vite.config.js配置进行跨域,无法代理成功的原因：

封装的axios拥有baseUrl，所以不会重写路径.如果拥有封装好的axios,需要将啊ingbaseUrl删掉

在vite.config.js中的配置：
前端接口请求应该是:/api/user/add,对应的后端接口
`@RequestMapping("/user/add")`

server:{
    cors:true,//开发模式
    host:"0.0.0.0",
    proxy:{
      '^/api/*':{ /* 转发/api  */
        target: 'http://localhost:3000/',
        changeOrigin: true,//允许跨域
        rewrite: (path) => path.replace(/^\/api/, "")//路径重新
      }
    }  
}