如何用原生JavaScript实现客户端变量传递至服务端JS文件？

问题根源 #

你遇到的req.body为空的情况，核心是两个问题：

1. 客户端发送请求时未指定Content-Type请求头，服务端无法识别请求体格式
2. 服务端未配置对应的请求体解析中间件，无法解析客户端发送的数据

修复步骤 #

1. 调整客户端代码，正确设置请求头和数据格式

根据你要发送的数据类型，选择对应的Content-Type：

• 若发送普通文本：

function functionName() {
    var http = new XMLHttpRequest();
    var url = 'http://localhost:5500/token';
    http.open("POST", url);
    // 告诉服务端请求体是纯文本
    http.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
    http.send("pass value from client");
    http.onreadystatechange = (e) => {
        if (http.status === 200) {
            console.log(http.responseText);
        }
    };
}

• 若发送JSON格式（更推荐，方便后续扩展数据结构）：

function functionName() {
    var http = new XMLHttpRequest();
    var url = 'http://localhost:5500/token';
    http.open("POST", url);
    http.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    // 将数据转为JSON字符串发送
    const data = { content: "pass value from client" };
    http.send(JSON.stringify(data));
    http.onreadystatechange = (e) => {
        if (http.status === 200) {
            console.log(http.responseText);
        }
    };
}

2. 服务端配置请求体解析中间件

假设你使用Express框架，必须在app.post路由之前添加对应的解析中间件：

• 解析纯文本格式：
  先安装body-parser（Express 4.16+也可使用内置方法，但body-parser兼容性更强）：

npm install body-parser

然后在服务端代码开头添加：

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

// 解析纯文本类型的请求体
app.use(bodyParser.text({ type: 'text/plain' }));

app.post("/token", async function(req, res) {
    console.log(req.body); // 现在能正常拿到客户端发送的文本
    // 后续业务逻辑...
});

• 解析JSON格式：
  Express内置JSON解析能力，无需额外安装依赖：

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

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

app.post("/token", async function(req, res) {
    console.log(req.body); // 现在能拿到{ content: "pass value from client" }
    // 后续业务逻辑...
});

3. 修复服务端其他潜在问题

你的服务端代码中http变量未定义，建议改用更易用的axios发送请求（需先执行npm install axios）：

const axios = require('axios');

app.post("/token", async function(req, res) {
    console.log(req.body);
    try {
        const response = await axios.post('<some URL>', {/* 这里放入要转发的数据 */}, {
            headers: {
                "Content-Type": "application/json;charset=UTF-8"
            }
        });
        res.send(response.data);
    } catch (err) {
        res.status(500).send('请求失败');
    }
});

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