向服务端提交表单数据的最佳实践及现有POST提交代码正确性问询

你的提交方式逻辑上是可行的，只存在一个小错误导致服务端无法解析数据；同时也有其他适合纯文本字段场景的标准化实现方式。

现有代码的核心问题 #

• 手动指定Content-Type: multipart/form-data是错误操作：当你使用FormData作为fetch的请求body时，浏览器会自动生成带有正确分隔符boundary的multipart/form-data请求头，手动覆盖这个头之后，请求会缺失boundary参数，服务端无法正确拆分表单字段，这就是你收不到数据的核心原因。
• 代码混合使用async/await和.then()链式调用，写法不规范，容易触发逻辑异常。

修复后的可运行代码 #

document.getElementById("myForm").addEventListener("submit", async (e) => {
    e.preventDefault();
    try {
        const res = await fetch("http://localhost:3000/course/add", {
            method: "POST",
            // 移除手动设置的Content-Type，由浏览器自动生成
            body: new FormData(e.target),
        });
        const response = await res.json();
        document.getElementById("container").innerHTML = response.message;
    } catch (err) {
        console.error('请求出错：', err);
    }
});

其他标准化提交实现 #

由于你只需要提交两个普通文本字段，没有文件上传需求，也可以选择以下更轻量的提交方式：

1. application/x-www-form-urlencoded 格式（原生表单默认提交格式） #

document.getElementById("myForm").addEventListener("submit", async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const searchParams = new URLSearchParams(formData);
    try {
        const res = await fetch("http://localhost:3000/course/add", {
            method: "POST",
            headers: {
                "Content-Type": "application/x-www-form-urlencoded"
            },
            body: searchParams
        });
        const response = await res.json();
        document.getElementById("container").innerHTML = response.message;
    } catch (err) {
        console.error('请求出错：', err);
    }
});

2. application/json 格式（前后端分离场景最常用） #

document.getElementById("myForm").addEventListener("submit", async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    // 此处对应表单输入框的name属性为firstName、lastName，可根据你的实际字段名调整
    const payload = {
        firstName: formData.get('firstName'),
        lastName: formData.get('lastName')
    };
    try {
        const res = await fetch("http://localhost:3000/course/add", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(payload)
        });
        const response = await res.json();
        document.getElementById("container").innerHTML = response.message;
    } catch (err) {
        console.error('请求出错：', err);
    }
});

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