前端POST请求体无法被后端获取及ERR_HTTP_HEADERS_SENT问题解决

核心原因 #

GET请求携带请求体不符合HTTP标准规范，绝大多数后端框架（比如Express）默认不会解析GET请求的body，这是你拿不到数据的根本原因；而ERR_HTTP_HEADERS_SENT错误是因为你在处理请求时重复发送了响应（比如调用了两次res.send/res.json）。

方案一：改用POST请求（推荐，符合规范） #

前端fetch代码调整 #

fetch('/getTIFFForSubsetAsNIRRange', {
  method: 'POST', // 改为POST请求
  headers: {
    'Content-Type': 'application/json' // 必须声明请求体格式为JSON
  },
  body: JSON.stringify({ wktRepresenation: '你的WKT数据内容' })
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));

后端（Express为例）配置与数据获取 #

1. 先在Express应用中配置JSON解析中间件（必须放在路由定义之前）：

const express = require('express');
const app = express();

// 解析JSON格式的请求体
app.use(express.json());

2. 路由中正确获取body，同时避免重复响应：

app.post('/getTIFFForSubsetAsNIRRange', async (req, res) => {
  try {
    const { wktRepresenation } = req.body;
    // 执行你的业务逻辑
    console.log('获取到的WKT数据:', wktRepresenation);
    
    // 仅发送一次响应
    res.json({ success: true, result: '处理完成' });
  } catch (err) {
    // 异常场景也只发送一次错误响应
    res.status(500).json({ success: false, error: err.message });
  }
});

方案二：坚持使用GET（不推荐，不符合规范） #

如果因特殊需求必须用GET，将WKT数据放到URL的查询参数中传递：

前端fetch代码 #

const encodedWkt = encodeURIComponent('你的WKT数据内容');
fetch(`/getTIFFForSubsetAsNIRRange?wktRepresenation=${encodedWkt}`)
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));

后端获取数据 #

app.get('/getTIFFForSubsetAsNIRRange', (req, res) => {
  try {
    const wktRepresenation = decodeURIComponent(req.query.wktRepresenation);
    // 执行业务逻辑
    res.json({ success: true, data: wktRepresenation });
  } catch (err) {
    res.status(500).json({ success: false, error: err.message });
  }
});

关于ERR_HTTP_HEADERS_SENT错误的额外说明 #

这个错误的本质是同一个请求处理流程中，多次调用了res.send/res.json/res.end这类发送响应的方法。比如在if分支里发了响应，之后又在分支外再次发送，或者异步逻辑处理不当导致重复触发响应。检查你的路由代码，确保每个请求只会触发一次响应输出。

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