Vue项目向json-server提交数据仅生成id无其他字段的问题及调试方法

问题根本原因 #

你遇到的问题是fetch配置项拼写错误：标准fetch的请求头配置字段是复数的headers，你写成了单数header，导致浏览器没有正确携带Content-Type: application/json请求头。json-server无法识别请求体是JSON格式，就不会解析你提交的body内容，只会自动生成id字段存入文件。

修正后的代码示例 #

handleSubmit() {
    console.log(this.title, this.details)
    // console: Test Title Lorem Ipsum dolor sit.

    let project = {
        title: this.title,
        details: this.details,
        completed: false,
    }

    console.log(project)
    // console: {title: 'Test Title', details: 'Lorem Ipsum dolor sit.', completed: false}

    fetch('http://localhost:3000/projects', {
        method: 'POST',
        // 修正为复数headers
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(project)
    })
    .then(() => this.$router.push('/'))
    .catch(err => console.log(err))
}

同类问题通用排查思路 #

• 第一步：优先校验请求本身是否正确
  遇到接口提交异常时，第一时间打开浏览器F12的「网络」面板，找到对应的POST请求，核对两个核心信息：
  1. 请求头中是否携带了正确的Content-Type，和你提交的内容格式匹配
  2. 请求体（Payload/Request Body）中的内容是否和你预期要提交的字段完全一致
• 第二步：结合服务端返回判断问题范围
  不要只看HTTP状态码，比如json-server只要收到合法的POST集合请求就会返回201，不代表数据被正确解析。如果返回的响应体中只有自动生成的id，没有你提交的字段，直接定位是服务端没有正确接收到/解析你发的内容，不需要排查前端数据构造、表单绑定的逻辑。
• 第三步：检查API调用的配置拼写
  原生API、第三方库的配置项拼写错误属于高频隐性问题，JS不会对对象中未定义的key做报错提示，写错的配置会被直接忽略。写代码时可以打开IDE的语法提示、参数校验插件，能避免90%以上的这类拼写错误。
• 第四步：分段打日志缩小范围
  你已经做对了这一步：在构造project对象后打印确认内容正确，就可以把排查范围锁定在「请求发送」环节，不用浪费时间检查前面的表单取值、响应式绑定逻辑。

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