🛡️一、WebSocket 基本概念
| 名称 | 全称 | 含义 | 使用场景 |
|---|
| ws:// | WebSocket | 非加密的 WebSocket 连接 | 开发环境、内网通信 |
| wss:// | WebSocket Secure | 加密的 WebSocket 连接（基于 TLS/SSL） | 生产环境、公网通信 |
🛡️二、安全性对比
| 特性 | ws:// | wss:// |
|---|
| 数据是否加密 | 否 | 是（通过 SSL/TLS） |
| 是否防止中间人攻击 | 否 | 是 |
| 是否需要证书 | 否 | 是（服务器需配置 SSL 证书） |
| 是否适合公网使用 | 不推荐 | 推荐 |
🛡️三、协议底层差异
| 差异 | ws:// | wss:// |
|---|
| 协议 | 基于 TCP 协议 | 基于 TLS/SSL 加密通道上的 TCP 协议 |
| 握手 | 握手过程是明文的 | 握手过程被加密 |
| 端口 | 默认端口：80 | 默认端口：443 |
🛡️四、配置与使用
🧩4.1、Vite 整体结构配置文件说明（vite.config.ts 或 vite.config.js）
export default defineConfig({server: {open: true,proxy: {'socket/': {target: 'ws://ip:端口',ws: true,changeOrigin: true,cookieDomainRewrite: {'^xxx.xxx.xxx.xxx': 'localhost'},rewrite: (path) => path.replace(/^\socket\//, '')}}}
})
🧩 4.2、关键字段解释
🔍 server.open
open: true
🔍 server.proxy
- 作用：用于设置开发环境下的请求代理规则，解决跨域问题。这里的 ‘socket/’ 是匹配请求路径前缀。
- ‘socket/’ 代理规则：
| 配置项 | 说明 |
|---|
| target | 请求要转发的目标服务器地址，这里是 ws://ip:端口，表示一个 WebSocket 地址 |
| ws | 设置为 true 表示该代理支持 WebSocket 协议 |
| changeOrigin | 是否更改请求头中的 origin 字段为 target 的地址，通常在跨域场景下设为 true |
| cookieDomainRewrite | 将响应中的 Cookie 域名重写，例如将 xxx.xxx.xxx.xxx 改成 localhost，便于本地调试使用 |
| rewrite | 请求路径重写函数，用于去掉 /socket 前缀再发送到目标服务器 |
✅ 4.3、实际效果举例
const socket = new WebSocket('ws://localhost:3000/socket/example');
🧠4.4、为什么需要这个代理？
在开发过程中，前端运行在 localhost:3000，而后端 WebSocket 服务可能部署在远程服务器上
（如 ws://192.168.1.100:8080），直接连接会遇到 跨域问题（CORS）。使用代理可以：- 绕过浏览器跨域限制- 在本地开发环境中模拟真实网络行为- 更方便地进行测试和调试
🧠4.5、完整流程图示意
[前端] ws://localhost:3000/socket/example↓
[Vite Dev Server 代理]↓
[重写路径] → /example↓
[转发到] ws://ip:端口/example
🧠4.6、建议
- 如果你的后端启用了 HTTPS/WSS，建议将 target 改为 wss://…
- 若生产环境也需代理，应使用 Nginx 或 API 网关来实现
- 不推荐在 production 构建中使用此代理机制，仅限开发阶段使用
