vuetify项目添加代理跨域请求

vuetify项目添加代理转发后端接口实现跨域请求

在项目根目录下找到vite.config.mts文件并在里面的server下配置代理,
具体实现代码如下:

配置一(推荐)

ts 复制代码
server: {
    port: 3000,
    // 配置代理
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true, // 允许跨域,修改 Origin 头匹配目标服务器
        rewrite: (path) => path.replace(/^\/api/, '/api'), // 移除请求路径中的/api前缀 (如果后端路由是 /api/login,则 replace 应保持 ^/api, '/api';如果后端路由是 /login,则改为 ^/api, '')
        logLevel: 'debug', // 打印请求日志
        secure: false, // 接受运行在 HTTPS 上的服务
        ws: true, // 启用 WebSocket 代理
      }
    }
  }

配置二

ts 复制代码
server: {
    port: 3000,
    // 配置代理
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true, // 允许跨域,修改 Origin 头匹配目标服务器
        pathRewrite: {
          '^/api': '/api'   // 移除请求路径中的/api前缀 (如果后端路由是 /api/login,则 pathRewrite 应保持 ^/api → /api;如果后端路由是 /login,则改为 ^/api: '')
        },
        logLevel: 'debug', // 打印请求日志
        secure: false, // 接受运行在 HTTPS 上的服务
        ws: true, // 启用 WebSocket 代理
      }
    }
  }
相关推荐
喜欢敲代码的程序员6 小时前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
海的诗篇_9 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
sunbyte14 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
skyymrj10 天前
Vue3 + Tailwind CSS 后台管理系统教程
前端·css·vue
程序猿小D10 天前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+Vue实现的校园二手交易平台管理系统,推荐!
java·数据库·mysql·spring·vue·毕业设计·校园二手交易平台
伍哥的传说11 天前
react gsap动画库使用详解之text文本动画
前端·vue.js·react.js·前端框架·vue·html5·动画
伍哥的传说11 天前
react gsap动画库使用详解之scroll滑动动画
前端·javascript·vue.js·react.js·前端框架·vue·动画
sunbyte11 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DrinkWater(喝水记录组件)
前端·javascript·css·vue.js·vue
麦兜*11 天前
【node】Mac m1 安装nvm 和node
java·前端·vue.js·chrome·macos·vue·nvm
胡斌附体11 天前
关于vue.mixin与vue.use的用法分析
vue·区别·mixin·通用·use·生活类比