当前位置: 首页 > news >正文

vuetify项目添加代理跨域请求

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

    • 配置一(推荐)
    • 配置二

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

配置一(推荐)

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

配置二

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

相关文章:

  • 【保姆级视频教程(二)】YOLOv12训练数据集构建:标签格式转换-划分-YAML 配置 避坑指南 | 小白也能轻松玩转目标检测!
  • 基于 ‌MySQL 数据库‌对三级视图(用户视图、DBA视图、内部视图)的详细解释
  • 2.2 添加注释
  • Uniapp 中布局魔法:display 属性
  • Redis速成(1)VMware虚拟机安装Redis+Session验证登录注册+MybatisPlus
  • 排序03(数据结构初阶)
  • 2.16作业
  • 数据库的常见权限作用
  • 在MAC上面通过HomeBrew安装node和npm@指定版本
  • Chart.js 折线图深入解析与使用指南
  • CentOS安装MariaDB
  • 轻量化网络设计|ShuffleNet:深度学习中的轻量化革命
  • Harbor服务需要crt证书,而下载是nginx的证书pem,应该怎么处理
  • 分享---rpc运维事故处理
  • vue3中测试:单元测试、组件测试、端到端测试
  • oracle日志大量解析报错too many parse errors
  • (python)Arrow库使时间处理变得更简单
  • 本地部署 GitHub 上的 Python 人脸识别项目
  • C++ 快速学习教程
  • Vxe UI 根据vxe-tabs 绑定不同的值,渲染生成不同的 tabls(页签)内容
  • wordpress hosts/百度seo推广方案
  • 佳木斯网站网站建设/网络服务器是指什么
  • 简单的j网站建设方案书/网站seo是什么意思
  • 网站建设pqiw/做神马seo快速排名软件
  • 垦利疫情最新消息今天/朔州网站seo
  • 网站建设 方案/在线培训管理系统