FormData发送数据请求失败

问题遇到的现象和发生背景

学习FormData对象拓展出来的一个问题，就是我根据接口的参数规定的form表单的name值，既然接口参数是一样的，那我用源生js发请求的时候，不应该是可以成功的么，但是我返回的却是｛msg： "图书的名字不能为空！"status: 502｝

用代码块功能插入代码，请勿粘贴截图

    <form id="f1">
        <input type="text" id="gg" name="bookname" />
        <input type="text" id="mm" name="author" />
        <input type="text" id="kk" name="publisher" />
        <button type="submit">提交</button>
    </form>
    <script>
        var form = document.querySelector('#f1')
        form.addEventListener('submit', function (e) {
            e.preventDefault()
            var fd = new FormData(form)
            var xhr = new XMLHttpRequest()
            // xhr.open('POST', 'http://www.liulongbin.top:3006/api/formData')
            xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
            xhr.send(fd)
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
            }
        }
        })
    </script>

运行结果及报错内容

｛msg： "图书的名字不能为空！"status: 502｝

我的解答思路和尝试过的方法

我明明是按照接口文档写的name的值，为什么会添加失败呢？

看下你的network 传的参数

后端接口 看看 接收到 数据了没。可能没接收到，可能 前端传的不对

这样处理一下试试呢：

let data= new FormData();
Object.keys(form).forEach((item) => {
    data.append(item, form[item]);
});

然后把data作为参数传过去