使用fetch发送POST请求传参后端接收name字段为空问题

传值为空是代码语法错误导致的：按钮点击事件中，你声明变量时把const和变量名name连写在了一起，没有加空格：

// 错误写法，const和name之间无空格
constname = nameInput.value;

这行代码不会创建名为name的局部变量，JS会把它识别为给全局变量name赋值——而浏览器环境自带全局name属性，默认值是空字符串。你后面清空输入框的操作不会改变这个空值，最终序列化后发给后端的自然就是{name: ''}。

给const和name之间补上空格即可，修正后的对应代码段：

addButton.onclick = function () {
    const nameInput = document.querySelector('#name-input');
    // 修正：const和name之间加空格
    const name = nameInput.value;
    nameInput.value = '';

    fetch('http://localhost:5001/insert',{
        headers:{
            'Content-type': 'application/json' 
        },
        method: 'POST',
        body: JSON.stringify({ name : name })
    })
    .then(response => response.json())
    .then(data => insertRowIntoTable(data['data']));
}

• 修复后可以先在变量赋值后加console.log(name)，确认取到输入框实际值再发请求
• 调试接口传参问题优先打开浏览器开发者工具的Network面板，找到对应请求查看Request Payload，能直接看到发出去的参数内容，比靠后端返回值排查效率高很多
• 日常开发建议开启ESLint代码校验，这类拼写错误会直接被标红提示，不用等到调接口才发现

问题截图

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