vuetify项目添加代理跨域请求

大叔是90后大叔2025-02-28 17:38

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 代理
      }
    }
  }