使用fetch发送POST请求仅返回ID，表单数据未提交至localhost:3000服务器

1. 修复Fetch请求头的拼写错误 #

你的fetch配置里把headers写成了单数header，这会导致请求头未正确设置，服务器无法解析你发送的JSON数据。修正后代码如下：

function postEmail(object) {
  fetch('http://localhost:3000/Emails', {
    method: 'POST',
    // 修正为复数形式headers
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json"
    },
    body: JSON.stringify(object)
  })
  .then(resp => resp.json())
  .then(eachEmail => console.log(eachEmail)) // 建议添加日志，方便查看服务器返回结果
}

2. 调用事件绑定函数 #

你仅定义了newestEmail()函数，但没有执行它，导致表单的submit事件监听器根本没被绑定。在代码末尾补充调用：

// 执行函数，绑定表单提交事件
newestEmail()

3. 可选优化：更可靠的表单值获取方式 #

虽然当前通过e.target.inputName.value获取值可行，但通过表单元素的name属性获取，兼容性和可读性更好：

function newestEmail(){
  doc.addEventListener('submit', (e) => {
    e.preventDefault()
    let object = {
      // 通过name属性定位表单元素
      name: e.target.elements['name'].value,
      email: e.target.elements['email'].value
    }
    console.log(object) // 提交前打印数据，确认是否正确收集
    postEmail(object)
  })
}

验证建议 #

1. 打开浏览器控制台，提交表单时查看object的打印结果，确认name和email是否正确获取。
2. 查看Network面板，检查POST请求的Request Headers是否包含Content-Type: application/json，Request Body是否存在正确的JSON数据。

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