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

Vite Proxy配置详解:从入门到实战应用

Vite Proxy配置详解:从入门到实战应用

一、什么是Proxy代理?

Proxy(代理)是开发中常用的解决跨域问题的方案。Vite内置了基于http-proxy的代理功能,可以轻松配置API请求转发。

二、基础配置

vite.config.js中配置proxy选项:

export default defineConfig({server: {proxy: {/api: {target: http://localhost:3000,changeOrigin: true,rewrite: path => path.replace(/^\/api/, )}}}
})
  • target: 代理目标地址
  • changeOrigin: 修改请求头中的host为目标URL
  • rewrite: 路径重写

三、进阶配置

1. 多代理配置

proxy: {/api1: {target: http://localhost:3001,// ...其他配置},/api2: {target: http://localhost:3002,// ...其他配置}
}

2. WebSocket代理

proxy: {/socket.io: {target: ws://localhost:3000,ws: true}
}

3. 自定义代理规则

proxy: {^/api/.*: {target: http://localhost:3000,bypass(req) {if (req.headers.accept.indexOf(html) !== -1) {return /index.html}}}
}

四、实战应用

1. 解决开发环境跨域

proxy: {/api: {target: https://production-server.com,changeOrigin: true,secure: false}
}

2. 模拟不同环境API

const targetMap = {dev: http://dev-server,test: http://test-server,prod: https://prod-server
}proxy: {/api: {target: targetMap[process.env.NODE_ENV],changeOrigin: true}
}

五、常见问题

  1. 代理不生效:检查路径是否匹配,特别是正则表达式
  2. HTTPS证书问题:设置secure: false跳过证书验证
  3. WebSocket无法连接:确保设置了ws: true

六、总结

Vite的Proxy配置简单强大,能有效解决开发中的跨域问题。通过灵活配置可以满足各种复杂场景需求。

提示:生产环境应使用Nginx等服务器处理代理,Vite代理仅用于开发环境。

http://www.dtcms.com/a/182908.html

相关文章:

  • Activity动态切换Fragment
  • 养生:为健康生活添彩
  • 【Linux第三章】vim
  • 达索PLM系统是什么?有什么用?
  • 亿级流量系统架构设计与实战(六)
  • 【MySQL】事务(重点)
  • 【计算机视觉】OpenCV实战项目:FunnyMirrors:基于OpenCV的实时哈哈镜效果实现技术解析
  • PyTorch API 9 - masked, nested, 稀疏, 存储
  • Linux 阻塞和非阻塞 I/O 简明指南
  • 复习javascript
  • Python_day21
  • 基于大模型的新型隐球菌脑膜炎智能诊疗全流程系统设计与实现的技术方案文档
  • 青少年编程与数学 02-019 Rust 编程基础 05课题、复合数据类型
  • 【从零实现JsonRpc框架#1】Json库介绍
  • Edububtu 系统详解
  • ASCLL码(T^T
  • 前端进化论·JavaScript 篇 · 数据类型
  • Python面向对象编程:初识类与对象
  • 数据库故障排查指南:从连接问题和性能优化
  • 逆向学习笔记(代码)
  • leetcode504.七进制数
  • Java基础 5.10
  • JavaSE核心知识点02面向对象编程02-05(方法)
  • 《向上生长》读书笔记day5
  • Dockers部署oscarfonts/geoserver镜像的Geoserver
  • Ansible模块——从控制节点向目标主机复制文件!
  • 软考错题集
  • 使用互斥锁保护临界
  • (51单片机)LCD显示红外遥控相关数字(Delay延时函数)(LCD1602教程)(Int0和Timer0外部中断教程)(IR红外遥控模块教程)
  • Spring Cloud -3( 9000 字详解 Spring Cloud)