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 代理
      }
    }
  }
相关推荐
伍哥的传说1 天前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
aiguangyuan1 天前
前端开发性能优化概要
系统架构·vue·react·前端开发
不老刘2 天前
Claude Code 基于 VUE + KonvaJS 实现海报生成器(附源码)
vue·claude·konvajs
今天不要写bug3 天前
js原生实现搜索框下拉列表输入框模糊匹配高亮
javascript·vue·ecmascript
weixin_422201303 天前
uniapp自定义圆形勾选框和全选框
javascript·uni-app·vue·自定义·checkbox
敲可耐的咕魂君4 天前
【建议AI收录本信息】electron进行主进程和渲染进程异步通信
electron·vue
前端程序猿-秦祥4 天前
uniapp打开导航软件并定位到目标位置的实现
前端·uni-app·vue·导航
sunbyte5 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ImageCarousel(图片轮播组件)
前端·javascript·vue.js·vue·ecmascript
百锦再5 天前
Vue使用element plus组件的细节问题之时间格式
前端·javascript·vue.js·vue·element·date·elementsplus
F2E_Zhangmo8 天前
基于cornerstone3D的dicom影像浏览器 第二章,初始化页面结构
前端·javascript·vue·cornerstone3d·cornerstonejs