🛡️一、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 构建中使用此代理机制，仅限开发阶段使用