使用 fetch 发送二进制数据实现自定义协议通信，需手动构造 ArrayBuffer 封装魔数、版本、长度头及 payload，fetch 传入该 buffer 或 Blob，设 Content-Type 为 application/octet-stream 等合适类型，省略 Content-Length，响应用 arrayBuffer() 读取并按协议解析，注意 CORS 预检限制。
使用 fetch 发送二进制数据（如 Blob 或 ArrayBuffer）实现自定义协议通信，核心在于控制请求体的原始字节流、设置正确的请求头，并确保服务端能按约定解析。它不依赖 JSON 或表单编码，而是把协议数据（比如带魔数、长度头、指令字段的二进制帧）直接作为请求体发出。
构造符合协议的二进制载荷
自定义协议通常要求严格字节布局，例如：4 字节魔数 + 2 字节版本 + 4 字节负载长度 + 实际 payload。你需要用 ArrayBuffer 和 DataView 手动写入：
- 创建足够大的
ArrayBuffer，容量 = 协议头长度 + 有效载荷长度 - 用
DataView按顺序写入魔数（setUint32）、版本（setUint16）、payload 长度等 - 将实际数据（如加密后的
Uint8Array）拷贝到 buffer 的指定偏移位置 - 最终传给
fetch的是这个完整 buffer，或由它构造的Blob
配置 fetch 请求：禁用默认处理，显式设置 headers
fetch 默认会对 Body 类型做内容协商，发送二进制时需主动干预：
- 不要设置
Content-Type为application/json或application/x-www-form-urlencoded - 若协议无 MIME 约定，可设为
application/octet-stream；若有自定义类型（如application/myproto-v1），则明确指定 - 必须省略
Content-Length—— 浏览器会自动计算并设置，手动设错会导致请求失败 - 避免使用
credentials: 'include'除非协议明确需要 Cookie，否则可能触发预检（CORS preflight）
处理响应：读取原始二进制，按协议解析
服务端返回的也可能是结构化二进制（如响应头+状态码+结果数据），不能直接 response.json()：
- 调用
response.arrayBuffer()获取完整响应体的ArrayBuffer - 用
new DataView(resBuf)按协议定义读取前 N 字节的状态字段、错误码、负载长度 - 根据解析出的长度，截取后续有效载荷部分（
resBuf.slice(headerLen)） - 如需进一步操作（如解密、解压缩），在
Uint8Array上进行
注意跨域与预检限制
自定义二进制通信常受 CORS 影响，尤其当设置了非简单请求头（如 X-Proto-Version）时：
- 简单请求头（
Accept、Content-Type仅限text/plain、multipart/form-data、application/x-www-form-urlencoded）不会触发预检 - 一旦添加自定义 header（如
X-My-Protocol: v2）或使用非简单Content-Type（如application/myproto），浏览器会先发OPTIONS预检 - 服务端必须正确响应预检：返回
Access-Control-Allow-Origin、Access-Control-Allow-Headers、Access-Control-Allow-Methods - 如无法控制服务端，可改用
Content-Type: application/octet-stream并只通过 URL query 或 body 传递元信息，规避预检
