3个坑让浏览器vpn项目跑通，新手避坑指南
刚接手一个内部工具需求，要在浏览器里实现一个简易的代理调试面板。第一版代码写完，本地跑起来直接炸了，控制台满屏的 Uncaught TypeError: Cannot read properties of undefined (reading 'socket')，StackTrace 长得跟天书一样，点哪里都没反应。这种报错一堆看不懂 StackTrace 的情况，在涉及 WebSocket 和跨域请求的项目里太常见了。很多新手这时候容易慌，觉得是自己代码写错了，其实大部分是环境配置和协议理解的坑。今天就把这个【浏览器vpn】实战项目的搭建过程拆解开，重点讲讲新手避坑的几个关键点，帮你少走弯路。
项目目标与核心逻辑
先说清楚我们要做什么。这里的“vpn”不是真正的虚拟专用网络，而是一个基于 WebSocket 的浏览器端代理调试器。它的核心目标是：让前端页面能够通过一个中间层转发请求，用于调试那些存在 CORS 限制或者需要特定 Header 的接口。
为什么不用 Postman 或浏览器自带的 DevTools？因为有些场景下，你需要把调试逻辑固化到页面里，或者需要配合前端代码进行联调。比如测试一个需要动态 Token 的接口，或者模拟不同地域的延迟。
整个系统分两部分：服务端（Node.js）：负责接收 WebSocket 连接，解析前端发来的 HTTP 请求指令，转发到目标服务器，再把响应传回前端。
前端（Vue3/React）：提供简单的 UI，让用户输入 URL、Method、Header，发送请求并展示结果。关键点在于，浏览器不能直接发任意的 HTTP 请求（受同源策略限制），所以必须通过 WebSocket 通道，由服务端代为执行。这就是这个“vpn”的本质——一个浏览器内的 HTTP 代理隧道。
目录结构规划
为了避免代码堆成一团，我们采用清晰的分层结构。以下是 browser-vpn-tunnel 项目的目录：
browser-vpn-tunnel/
├── client/
│ ├── src/
│ │ ├── components/
│ │ │ ├── RequestPanel.vue # 请求输入面板
│ │ │ └── ResponseViewer.vue # 响应结果展示
│ │ ├── composables/
│ │ │ └── useWebSocket.ts # WebSocket 逻辑封装
│ │ ├── App.vue
│ │ └── main.ts
│ ├── package.json
│ └── vite.config.ts
├── server/
│ ├── src/
│ │ ├── index.ts # 入口文件
│ │ ├── wsHandler.ts # WebSocket 消息处理核心
│ │ └── types.ts # 类型定义
│ ├── package.json
│ └── tsconfig.json
└── README.md这种结构的好处是，前后端职责分离，类型定义共享（可以通过 types.ts 复制或使用 monorepo 工具），后期扩展也很方便。
核心代码实现与逐行解析
1. 服务端：WebSocket 消息处理器
这是整个项目的核心，也是新手最容易出错的地方。很多人直接用 ws 库收到消息就发 http.get，结果遇到 POST 请求或复杂 Header 就崩了。
我们使用 NPM 官方包 ws 和 axios（虽然服务端推荐用 undici 或 got，但 axios 对新手更友好，且生态成熟，在 NPM 官方包中下载量极高，可信度高）。
// server/src/wsHandler.ts
import { WebSocketServer } from 'ws';
import axios from 'axios';
import { RequestMessage, ResponseMessage } from './types';/*** 处理 WebSocket 连接* @param wss WebSocketServer 实例*/
export function handleConnections(wss: WebSocketServer) {wss.on('connection', (ws) = {console.log('[WS] Client connected');// 监听客户端发送的消息ws.on('message', async (data) = {let msg: RequestMessage;try {// 【避坑点1】JSON.parse 必须 try-catch// 新手常犯错误：假设前端发的一定是合法 JSONmsg = JSON.parse(data.toString());} catch (e) {ws.send(JSON.stringify({type: 'error',message: 'Invalid JSON format'}));return;}// 【避坑点2】校验必要字段if (!msg.url || !msg.method) {ws.send(JSON.stringify({type: 'error',message: 'Missing url or method'}));return;}try {// 构造 axios 请求配置// 【避坑点3】不要硬编码 timeout，允许前端配置const config = {method: msg.method.toLowerCase(),url: msg.url,headers: msg.headers || {},data: msg.body,timeout: msg.timeout || 30000,// 【避坑点4】关键：禁止 axios 自动转换响应数据// 否则二进制流（如图片、PDF）会变成 [object Blob]responseType: msg.responseType || 'text',// 【避坑点5】关键：禁止 axios 自动解压 gzip，保留原始状态码validateStatus: () = true };console.log(`[WS] Forwarding request: ${msg.method} ${msg.url}`);const response = await axios(config);// 构造响应消息const resp: ResponseMessage = {id: msg.id,type: 'response',status: response.status,statusText: response.statusText,headers: response.headers,data: response.data,// 如果是二进制，base64 编码isBinary: response.headers['content-type']?.includes('image') || response.headers['content-type']?.includes('pdf')};// 【避坑点6】大文件处理// 如果 data 是 Buffer，转 base64；否则直接发字符串if (resp.isBinary Buffer.isBuffer(response.data)) {resp.data = response.data.toString('base64');}ws.send(JSON.stringify(resp));} catch (error: any) {// 【避坑点7】网络错误与 HTTP 错误区分// axios 的 error.response 存在说明请求到达了服务器// 如果不存在，说明网络不通或 DNS 解析失败const isHttpError = error.response;const errorMessage = isHttpError ? `HTTP ${error.response.status}: ${error.response.statusText}`: `Network Error: ${error.message}`;ws.send(JSON.stringify({id: msg.id,type: 'error',message: errorMessage}));}});// 连接关闭清理ws.on('close', () = {console.log('[WS] Client disconnected');});});
}逐行讲解重点：validateStatus: () = true：这是新手最大的坑。默认 axios 会对 4xx/5xx 状态码抛出异常，导致你无法拿到具体的错误响应体。改成 () = true 后，所有 HTTP 状态码都视为成功，由你自行判断。
responseType：默认是 'json'，如果你请求一个返回纯文本的接口，axios 会尝试解析 JSON 失败。根据需求动态设置，或者设为 'text' 更安全。
错误处理：一定要区分 Network Error 和 HTTP Error。前者是连不上服务器，后者是服务器返回了错误码。混淆这两者会导致调试方向完全错误。2. 前端：WebSocket 封装与状态管理
前端负责 UI 和通信。我们使用 Vue3 Composition API，封装一个 useWebSocket 组合式函数。
// client/src/composables/useWebSocket.ts
import { ref, onUnmounted } from 'vue';
import { ResponseMessage } from './types';export function useWebSocket(url: string) {const ws = refWebSocket | null(null);const status = ref'connecting' | 'connected' | 'disconnected'('disconnected');const responses = refMapstring, ResponseMessage(new Map());const errors = refMapstring, string(new Map());let reconnectAttempts = 0;const MAX_RECONNECT_ATTEMPTS = 5;/*** 初始化连接*/const connect = () = {if (ws.value) return;status.value = 'connecting';// 【避坑点8】使用 wss:// 而非 ws:// 如果生产环境是 HTTPSconst wsUrl = url.startsWith('wss') ? url : url.replace('http', 'ws');ws.value = new WebSocket(wsUrl);ws.value.onopen = () = {console.log('[WS] Connected');status.value = 'connected';reconnectAttempts = 0;};ws.value.onmessage = (event) = {try {const msg = JSON.parse(event.data);if (msg.type === 'response') {responses.value.set(msg.id, msg);errors.value.delete(msg.id);} else if (msg.type === 'error') {errors.value.set(msg.id, msg.message);responses.value.delete(msg.id);}} catch (e) {console.error('Failed to parse message', e);}};ws.value.onclose = () = {console.log('[WS] Closed');status.value = 'disconnected';ws.value = null;// 【避坑点9】自动重连逻辑if (reconnectAttempts MAX_RECONNECT_ATTEMPTS) {reconnectAttempts++;const delay = Math.min(1000 * Math.pow(2, reconnectAttempts), 10000);setTimeout(connect, delay);}};ws.value.onerror = (error) = {console.error('[WS] Error', error);// onerror 后通常会触发 onclose，所以不需要额外处理};};/*** 发送请求*/const sendRequest = (payload: any) = {if (ws.value ws.value.readyState === WebSocket.OPEN) {// 【避坑点10】生成唯一 ID，用于关联请求与响应const id = Date.now().toString() + Math.random().toString(36).substr(2, 9);payload.id = id;ws.value.send(JSON.stringify(payload));return id;}throw new Error('WebSocket not connected');};onUnmounted(() = {if (ws.value) {ws.value.close();ws.value = null;}});return { status, responses, errors, connect, sendRequest };
}关键细节：ID 关联：WebSocket 是全双工通信，多个请求可能交错返回。必须用 id 将请求和响应一一对应，否则 UI 会显示错乱。
自动重连：网络不稳定是常态，简单的 setTimeout 重连配合指数退避（Exponential Backoff）是标准做法。
状态同步：前端不能假设服务器总是在线，必须通过 status 变量控制 UI 的禁用状态。运行与测试
1. 启动服务端
cd server
npm install
npm run dev确保 server/src/index.ts 中监听了正确的端口，例如 3000。
2. 启动前端
cd client
npm install
npm run devVite 默认监听 5173。在 vite.config.ts 中配置代理，避免开发时的跨域问题（虽然 WebSocket 不受 CORS 限制，但 HTTP 接口可能需要）：
// vite.config.ts
export default defineConfig({server: {proxy: {'/api': {target: 'http://localhost:3000',changeOrigin: true}}}
})3. 测试用例GET 请求：输入 https://jsonplaceholder.typicode.com/posts/1，Method 选 GET。预期：返回 JSON 数据，状态码 200。POST 请求：输入 https://httpbin.org/post，Method 选 POST，Body 填入 {name: test}，Header 添加 Content-Type: application/json。预期：返回包含你发送的 body 的 JSON。404 测试：输入 https://httpbin.org/404。预期：状态码 404，响应体包含错误信息，不应抛出 JS 异常。二进制测试：输入 https://httpbin.org/image/png。预期：前端能正确渲染图片（需要在前端 ResponseViewer 中根据 content-type 判断是否显示 img 标签）。常见报错排查：Failed to connect to WebSocket：检查端口是否被占用，防火墙是否拦截。
Invalid JSON format：检查前端发送的数据是否包含特殊字符未转义，使用 JSON.stringify 确保格式正确。
CORS Error：WebSocket 本身没有 CORS 限制，但如果你在前端同时发起了直接的 HTTP 请求，会触发 CORS。确保所有请求都通过 WebSocket 转发。优化扩展与进阶技巧
基础功能跑通后，可以做一些增强：请求拦截与修改：在前端增加“请求头编辑”功能，允许用户在发送前动态修改 Header。例如，添加 Authorization: Bearer token。
响应体高亮：使用 highlight.js 或 prismjs 对 JSON、XML 响应进行语法高亮，提升可读性。
历史请求记录：使用 localStorage 保存最近 10 条请求，方便快速重发。
多标签页支持：如果前端是 SPA，考虑使用 BroadcastChannel API 在多标签页间同步 WebSocket 状态，避免每个标签页都建立独立连接。
安全性：白名单：在服务端限制可访问的域名，防止 SSRF（服务器端请求伪造）攻击。
速率限制：限制每个客户端的请求频率，防止滥用。
TLS：生产环境务必使用 wss:// 加密通道。关于 NPM 官方包的选择建议：ws：最标准的 WebSocket 实现，无额外依赖，性能优秀。
axios：虽然服务端有 undici 等更底层的库，但 axios 的拦截器机制和错误处理对业务逻辑封装更友好。
vue / react：前端框架选择取决于团队技术栈，此处以 Vue3 为例，因其组合式 API 更利于逻辑复用。小结
搭建一个浏览器端的 VPN 调试工具，核心不在于“加密”或“隧道”，而在于跨域请求的代理转发和全双工通信的状态管理。新手最容易踩的坑集中在：Axios 的默认行为：validateStatus 和 responseType 的配置。
WebSocket 的消息关联：必须用 ID 区分请求与响应。
错误处理：区分网络错误和 HTTP 错误，避免混淆。
连接管理：实现自动重连和状态同步。这个项目虽然简单，但覆盖了前端网络请求、WebSocket 通信、Node.js 服务端开发等多个核心知识点。你可以基于此模板，扩展出更多调试工具，比如 API Mock 服务器、请求录制回放工具等。
你更常用哪种写法？是直接在前端封装一个全局的 fetch 拦截器，还是像本文这样通过 WebSocket 中转？评论区交流一下你的方案，特别是处理复杂 Header 和二进制数据时的经验。 3个坑让浏览器vpn项目跑通，新手避坑指南
3个坑让浏览器vpn项目跑通，新手避坑指南
刚接手一个内部工具需求，要在浏览器里实现一个简易的代理调试面板。第一版代码写完，本地跑起来直接炸了，控制台满屏的 Uncaught TypeError: Cannot read properties of undefined (reading 'socket')，StackTrace 长得跟天书一样，点哪里都没反应。这种报错一堆看不懂 StackTrace 的情况，在涉及 WebSocket 和跨域请求的项目里太常见了。很多新手这时候容易慌，觉得是自己代码写错了，其实大部分是环境配置和协议理解的坑。今天就把这个【浏览器vpn】实战项目的搭建过程拆解开，重点讲讲新手避坑的几个关键点，帮你少走弯路。
项目目标与核心逻辑
先说清楚我们要做什么。这里的“vpn”不是真正的虚拟专用网络，而是一个基于 WebSocket 的浏览器端代理调试器。它的核心目标是：让前端页面能够通过一个中间层转发请求，用于调试那些存在 CORS 限制或者需要特定 Header 的接口。
为什么不用 Postman 或浏览器自带的 DevTools？因为有些场景下，你需要把调试逻辑固化到页面里，或者需要配合前端代码进行联调。比如测试一个需要动态 Token 的接口，或者模拟不同地域的延迟。
整个系统分两部分：服务端（Node.js）：负责接收 WebSocket 连接，解析前端发来的 HTTP 请求指令，转发到目标服务器，再把响应传回前端。
前端（Vue3/React）：提供简单的 UI，让用户输入 URL、Method、Header，发送请求并展示结果。关键点在于，浏览器不能直接发任意的 HTTP 请求（受同源策略限制），所以必须通过 WebSocket 通道，由服务端代为执行。这就是这个“vpn”的本质——一个浏览器内的 HTTP 代理隧道。
目录结构规划
为了避免代码堆成一团，我们采用清晰的分层结构。以下是 browser-vpn-tunnel 项目的目录：
browser-vpn-tunnel/
├── client/
│ ├── src/
│ │ ├── components/
│ │ │ ├── RequestPanel.vue # 请求输入面板
│ │ │ └── ResponseViewer.vue # 响应结果展示
│ │ ├── composables/
│ │ │ └── useWebSocket.ts # WebSocket 逻辑封装
│ │ ├── App.vue
│ │ └── main.ts
│ ├── package.json
│ └── vite.config.ts
├── server/
│ ├── src/
│ │ ├── index.ts # 入口文件
│ │ ├── wsHandler.ts # WebSocket 消息处理核心
│ │ └── types.ts # 类型定义
│ ├── package.json
│ └── tsconfig.json
└── README.md这种结构的好处是，前后端职责分离，类型定义共享（可以通过 types.ts 复制或使用 monorepo 工具），后期扩展也很方便。
核心代码实现与逐行解析
1. 服务端：WebSocket 消息处理器
这是整个项目的核心，也是新手最容易出错的地方。很多人直接用 ws 库收到消息就发 http.get，结果遇到 POST 请求或复杂 Header 就崩了。
我们使用 NPM 官方包 ws 和 axios（虽然服务端推荐用 undici 或 got，但 axios 对新手更友好，且生态成熟，在 NPM 官方包中下载量极高，可信度高）。
// server/src/wsHandler.ts
import { WebSocketServer } from 'ws';
import axios from 'axios';
import { RequestMessage, ResponseMessage } from './types';/*** 处理 WebSocket 连接* @param wss WebSocketServer 实例*/
export function handleConnections(wss: WebSocketServer) {wss.on('connection', (ws) = {console.log('[WS] Client connected');// 监听客户端发送的消息ws.on('message', async (data) = {let msg: RequestMessage;try {// 【避坑点1】JSON.parse 必须 try-catch// 新手常犯错误：假设前端发的一定是合法 JSONmsg = JSON.parse(data.toString());} catch (e) {ws.send(JSON.stringify({type: 'error',message: 'Invalid JSON format'}));return;}// 【避坑点2】校验必要字段if (!msg.url || !msg.method) {ws.send(JSON.stringify({type: 'error',message: 'Missing url or method'}));return;}try {// 构造 axios 请求配置// 【避坑点3】不要硬编码 timeout，允许前端配置const config = {method: msg.method.toLowerCase(),url: msg.url,headers: msg.headers || {},data: msg.body,timeout: msg.timeout || 30000,// 【避坑点4】关键：禁止 axios 自动转换响应数据// 否则二进制流（如图片、PDF）会变成 [object Blob]responseType: msg.responseType || 'text',// 【避坑点5】关键：禁止 axios 自动解压 gzip，保留原始状态码validateStatus: () = true };console.log(`[WS] Forwarding request: ${msg.method} ${msg.url}`);const response = await axios(config);// 构造响应消息const resp: ResponseMessage = {id: msg.id,type: 'response',status: response.status,statusText: response.statusText,headers: response.headers,data: response.data,// 如果是二进制，base64 编码isBinary: response.headers['content-type']?.includes('image') || response.headers['content-type']?.includes('pdf')};// 【避坑点6】大文件处理// 如果 data 是 Buffer，转 base64；否则直接发字符串if (resp.isBinary Buffer.isBuffer(response.data)) {resp.data = response.data.toString('base64');}ws.send(JSON.stringify(resp));} catch (error: any) {// 【避坑点7】网络错误与 HTTP 错误区分// axios 的 error.response 存在说明请求到达了服务器// 如果不存在，说明网络不通或 DNS 解析失败const isHttpError = error.response;const errorMessage = isHttpError ? `HTTP ${error.response.status}: ${error.response.statusText}`: `Network Error: ${error.message}`;ws.send(JSON.stringify({id: msg.id,type: 'error',message: errorMessage}));}});// 连接关闭清理ws.on('close', () = {console.log('[WS] Client disconnected');});});
}逐行讲解重点：validateStatus: () = true：这是新手最大的坑。默认 axios 会对 4xx/5xx 状态码抛出异常，导致你无法拿到具体的错误响应体。改成 () = true 后，所有 HTTP 状态码都视为成功，由你自行判断。
responseType：默认是 'json'，如果你请求一个返回纯文本的接口，axios 会尝试解析 JSON 失败。根据需求动态设置，或者设为 'text' 更安全。
错误处理：一定要区分 Network Error 和 HTTP Error。前者是连不上服务器，后者是服务器返回了错误码。混淆这两者会导致调试方向完全错误。2. 前端：WebSocket 封装与状态管理
前端负责 UI 和通信。我们使用 Vue3 Composition API，封装一个 useWebSocket 组合式函数。
// client/src/composables/useWebSocket.ts
import { ref, onUnmounted } from 'vue';
import { ResponseMessage } from './types';export function useWebSocket(url: string) {const ws = refWebSocket | null(null);const status = ref'connecting' | 'connected' | 'disconnected'('disconnected');const responses = refMapstring, ResponseMessage(new Map());const errors = refMapstring, string(new Map());let reconnectAttempts = 0;const MAX_RECONNECT_ATTEMPTS = 5;/*** 初始化连接*/const connect = () = {if (ws.value) return;status.value = 'connecting';// 【避坑点8】使用 wss:// 而非 ws:// 如果生产环境是 HTTPSconst wsUrl = url.startsWith('wss') ? url : url.replace('http', 'ws');ws.value = new WebSocket(wsUrl);ws.value.onopen = () = {console.log('[WS] Connected');status.value = 'connected';reconnectAttempts = 0;};ws.value.onmessage = (event) = {try {const msg = JSON.parse(event.data);if (msg.type === 'response') {responses.value.set(msg.id, msg);errors.value.delete(msg.id);} else if (msg.type === 'error') {errors.value.set(msg.id, msg.message);responses.value.delete(msg.id);}} catch (e) {console.error('Failed to parse message', e);}};ws.value.onclose = () = {console.log('[WS] Closed');status.value = 'disconnected';ws.value = null;// 【避坑点9】自动重连逻辑if (reconnectAttempts MAX_RECONNECT_ATTEMPTS) {reconnectAttempts++;const delay = Math.min(1000 * Math.pow(2, reconnectAttempts), 10000);setTimeout(connect, delay);}};ws.value.onerror = (error) = {console.error('[WS] Error', error);// onerror 后通常会触发 onclose，所以不需要额外处理};};/*** 发送请求*/const sendRequest = (payload: any) = {if (ws.value ws.value.readyState === WebSocket.OPEN) {// 【避坑点10】生成唯一 ID，用于关联请求与响应const id = Date.now().toString() + Math.random().toString(36).substr(2, 9);payload.id = id;ws.value.send(JSON.stringify(payload));return id;}throw new Error('WebSocket not connected');};onUnmounted(() = {if (ws.value) {ws.value.close();ws.value = null;}});return { status, responses, errors, connect, sendRequest };
}关键细节：ID 关联：WebSocket 是全双工通信，多个请求可能交错返回。必须用 id 将请求和响应一一对应，否则 UI 会显示错乱。
自动重连：网络不稳定是常态，简单的 setTimeout 重连配合指数退避（Exponential Backoff）是标准做法。
状态同步：前端不能假设服务器总是在线，必须通过 status 变量控制 UI 的禁用状态。运行与测试
1. 启动服务端
cd server
npm install
npm run dev确保 server/src/index.ts 中监听了正确的端口，例如 3000。
2. 启动前端
cd client
npm install
npm run devVite 默认监听 5173。在 vite.config.ts 中配置代理，避免开发时的跨域问题（虽然 WebSocket 不受 CORS 限制，但 HTTP 接口可能需要）：
// vite.config.ts
export default defineConfig({server: {proxy: {'/api': {target: 'http://localhost:3000',changeOrigin: true}}}
})3. 测试用例GET 请求：输入 https://jsonplaceholder.typicode.com/posts/1，Method 选 GET。预期：返回 JSON 数据，状态码 200。POST 请求：输入 https://httpbin.org/post，Method 选 POST，Body 填入 {name: test}，Header 添加 Content-Type: application/json。预期：返回包含你发送的 body 的 JSON。404 测试：输入 https://httpbin.org/404。预期：状态码 404，响应体包含错误信息，不应抛出 JS 异常。二进制测试：输入 https://httpbin.org/image/png。预期：前端能正确渲染图片（需要在前端 ResponseViewer 中根据 content-type 判断是否显示 img 标签）。常见报错排查：Failed to connect to WebSocket：检查端口是否被占用，防火墙是否拦截。
Invalid JSON format：检查前端发送的数据是否包含特殊字符未转义，使用 JSON.stringify 确保格式正确。
CORS Error：WebSocket 本身没有 CORS 限制，但如果你在前端同时发起了直接的 HTTP 请求，会触发 CORS。确保所有请求都通过 WebSocket 转发。优化扩展与进阶技巧
基础功能跑通后，可以做一些增强：请求拦截与修改：在前端增加“请求头编辑”功能，允许用户在发送前动态修改 Header。例如，添加 Authorization: Bearer token。
响应体高亮：使用 highlight.js 或 prismjs 对 JSON、XML 响应进行语法高亮，提升可读性。
历史请求记录：使用 localStorage 保存最近 10 条请求，方便快速重发。
多标签页支持：如果前端是 SPA，考虑使用 BroadcastChannel API 在多标签页间同步 WebSocket 状态，避免每个标签页都建立独立连接。
安全性：白名单：在服务端限制可访问的域名，防止 SSRF（服务器端请求伪造）攻击。
速率限制：限制每个客户端的请求频率，防止滥用。
TLS：生产环境务必使用 wss:// 加密通道。关于 NPM 官方包的选择建议：ws：最标准的 WebSocket 实现，无额外依赖，性能优秀。
axios：虽然服务端有 undici 等更底层的库，但 axios 的拦截器机制和错误处理对业务逻辑封装更友好。
vue / react：前端框架选择取决于团队技术栈，此处以 Vue3 为例，因其组合式 API 更利于逻辑复用。小结
搭建一个浏览器端的 VPN 调试工具，核心不在于“加密”或“隧道”，而在于跨域请求的代理转发和全双工通信的状态管理。新手最容易踩的坑集中在：Axios 的默认行为：validateStatus 和 responseType 的配置。
WebSocket 的消息关联：必须用 ID 区分请求与响应。
错误处理：区分网络错误和 HTTP 错误，避免混淆。
连接管理：实现自动重连和状态同步。这个项目虽然简单，但覆盖了前端网络请求、WebSocket 通信、Node.js 服务端开发等多个核心知识点。你可以基于此模板，扩展出更多调试工具，比如 API Mock 服务器、请求录制回放工具等。
你更常用哪种写法？是直接在前端封装一个全局的 fetch 拦截器，还是像本文这样通过 WebSocket 中转？评论区交流一下你的方案，特别是处理复杂 Header 和二进制数据时的经验。