JavaScript客户端GET请求如何在请求体而非URL参数中携带JSON或multipart数据

HTTP 规范本身没有禁止 GET 请求携带请求体，但该用法不符合通用设计惯例，绝大多数基础设施默认不会兼容，仅在两端、中间链路完全可控的场景下可尝试使用，具体说明如下：

浏览器端实现代码 #

XMLHttpRequest 明确禁止为 GET/HEAD 请求设置请求体，仅可通过 Fetch API 实现对应需求：

发送带JSON body的GET请求 #

fetch('/target/api', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    id: 123,
    name: 'test'
  })
})
.then(res => res.json())
.then(data => console.log('响应结果：', data))
.catch(err => console.error('请求异常：', err))

发送带multipart/form-data body的GET请求 #

直接传入 FormData 对象即可，无需手动设置 Content-Type 头，浏览器会自动生成带边界标识的正确请求头：

const formData = new FormData()
// 追加文本字段
formData.append('user_id', '456')
// 追加文件字段
formData.append('avatar', document.querySelector('#avatar-input').files[0])

fetch('/target/api', {
  method: 'GET',
  body: formData
})
.then(res => res.json())
.then(data => console.log('响应结果：', data))
.catch(err => console.error('请求异常：', err))

兼容性风险说明 #

该方案存在大量不可控风险，生产公网环境不推荐使用：

• 主流服务端框架默认会丢弃 GET 请求的请求体，例如 Express、Spring Boot 等未做特殊配置的情况下，无法读取到 GET 请求的 body 内容
• 公网中的反向代理、CDN、WAF 等中间节点通常会将携带 body 的 GET 请求判定为异常请求，直接拦截或丢弃
• 部分浏览器、HTTP/2、HTTP/3 实现也会直接拒绝携带 body 的 GET 请求，导致请求失败

如果无法修改服务端支持 POST 请求，优先建议将参数序列化后放到 URL 的查询参数中传递，参数过长的话可尝试做 base64 编码压缩后传递（注意不同浏览器、服务端对 URL 长度的限制通常在 2KB~8KB 之间）。

内容的提问来源于stack exchange，提问作者Abdelrahman Akram