如何从React前端携带LongUrl等参数请求Node后端？现有代码失效

现有代码的核心问题 #

直接把longurl拼在URL路径里，会因为URL自带的特殊字符（比如/、?、&等）导致路径解析失败，后端无法获取完整的LongUrl值。而且POST请求用路径参数传递复杂数据，本身就不符合HTTP规范。

修复方案 #

1. 前端代码修改（用请求体传参）

const ulozeniZmen = (event) => {
    event.preventDefault();
    fetch('https://serverWithNodeApp.com/insert', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            id: id,
            name: name,
            longUrl: longurl
        })
    })
    .then(response => response.json())
    .then(data => console.log('保存成功:', data))
    .catch(error => console.error('保存失败:', error));
}

• 先执行event.preventDefault()，避免表单默认提交行为提前触发
• 设置Content-Type为application/json，明确告知后端接收JSON格式数据
• 用JSON.stringify把参数转为JSON字符串，放在请求体中传递

2. 后端代码修改（解析请求体参数）

首先确保你的Express应用配置了解析JSON请求体的中间件（Express 4.16+自带该功能，无需额外安装）：

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

// 必须添加此中间件，才能解析JSON格式的请求体
app.use(express.json());

然后修改POST接口逻辑：

app.post('/insert', function (req, res) {
    const post = {
        id: req.body.id,
        name: req.body.name,
        longUrl: req.body.longUrl,
    };
    connection.query("INSERT INTO `test` SET ?", post, (error, rows) => {
        if (error) {
            console.error('数据库插入错误:', error);
            return res.status(500).send('插入失败');
        }
        res.status(200).send(rows);
    });
});

• 从req.body中读取参数，替代原来的req.params
• 增加错误捕获并返回500状态码，避免服务器因未处理的异常崩溃
• 移除路径中的:id/:name/:longurl占位符

备选方案（若必须用路径参数） #

如果因特殊需求必须通过路径传递参数，需要对longurl做URL编码，前端修改如下：

const encodedLongUrl = encodeURIComponent(longurl);
fetch(`https://serverWithNodeApp.com/insert/${id}/${name}/${encodedLongUrl}`, { method: 'POST' })

后端无需修改，但这种方式存在风险（比如超长URL被浏览器/服务器截断），不推荐使用。

内容的提问来源于stack exchange，提问作者Karel Karafiát