如何在网页中接收并读取 POST HTTP 请求的数据？-html教程-PHP中文网

如何在网页中接收并读取 POST HTTP 请求的数据？

浏览器端 javascript 无法直接读取 post 请求的请求体（body）数据，因为该数据由服务器接收并处理；前端只能通过 url 查询参数（get）获取信息，或借助后端服务转发/暴露数据。

浏览器端 javascript 无法直接读取 post 请求的请求体（body）数据，因为该数据由服务器接收并处理；前端只能通过 url 查询参数（get）获取信息，或借助后端服务转发/暴露数据。

在 Web 开发中，一个常见误区是认为前端页面（如 index.html）能像服务器一样“监听”并解析来自其他客户端的 POST 请求。但实际上，纯静态 HTML + 浏览器 JavaScript 运行在客户端沙箱中，不具备接收 HTTP 请求的能力——它既不能监听端口，也无法访问当前页面被 POST 访问时的原始请求体。

例如，你用 fetch() 或表单提交向 https://yoursite.com/endpoint 发送如下 POST 请求：

const data = "'<website href>'";
fetch('/endpoint', {
  method: 'POST',
  headers: { 'Content-Type': 'text/plain' },
  body: data
});</website>

这段代码会将数据发送出去，但目标页面（如 /endpoint 对应的 HTML 文件）加载后，其内部的 <script> 是完全无法获知本次 POST 的 body 内容的</script>。浏览器不会把请求体自动注入全局变量，也不会提供类似 request.body 的 API 给前端 JS 使用。

✅ 正确做法分两种场景：

若你控制后端：需用服务端语言（如 Node.js、Python Flask、PHP 等）接收 POST 数据，并通过响应返回给前端（例如 JSON），或渲染到 HTML 中供 JS 读取：

Follow
Follow是一款集 RSS 订阅、AI 摘要、自动翻译和社交互动于一体的信息阅读器。

下载
```
// 示例：Node.js + Express 接收并回传
app.post('/api/receive', (req, res) => {
  let rawData = '';
  req.on('data', chunk => rawData += chunk);
  req.on('end', () => {
    console.log('Received:', rawData); // ✅ 服务端可读取
    res.json({ success: true, data: rawData });
  });
});
```
前端再用 fetch('/api/receive').then(r => r.json()).then(console.log) 获取结果。

若仅限前端调试：改用 GET 请求传递数据（仅限少量、非敏感内容），利用 URL 参数读取：

// 构造 GET 请求（如用于测试）
const url = new URL(window.location.href);
const receivedData = url.searchParams.get('data');
if (receivedData) {
  console.log('Received via GET:', receivedData); // ✅ 可行
}

⚠️ 注意事项：