前端JavaScript发送POST请求后后端接收异常字典的问题排查

前端使用以下JavaScript代码发送POST请求：

var mix = {
    methods: {
        signIn () {
            const username = document.querySelector('#login').value
            const password = document.querySelector('#password').value
            var dict = {}
            dict['username']=username
            this.postData('/api/sign-in/', JSON.stringify(dict))
                .then(({ data, status }) => {
                    location.assign(`/`)
                })
                .catch(() => {
                    alert('Error auth')
                })
        }
    },
    mounted() {
    },
    data() {
        return {}
    }
}

当请求体为{"username": "aa"}时，后端接收到的字典为{'{"username":"aa"}': ''}——整个JSON字符串被当作键，值为空，请问这是什么问题？

• 根本问题：你把JSON字符串直接作为请求体发送，但没设置Content-Type: application/json请求头。后端默认会按application/x-www-form-urlencoded格式解析请求体，这种格式要求数据是key=value的键值对，所以后端会把整个JSON字符串当成一个key，自然就没有对应value了。

• 具体修复方案：

  1. 如果你是自己封装的postData方法，必须在请求里添加正确的请求头：

     // 以fetch封装为例，修改postData方法
     postData(url, data) {
       return fetch(url, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json' // 必须加这个头，告诉后端是JSON格式
         },
         body: data
       }).then(res => res.json())
     }
     

  2. 如果用的是axios这类常用请求库，根本不用手动JSON.stringify，直接传对象就行——axios会自动帮你序列化数据并设置正确的请求头：

     // 把JSON.stringify(dict)换成dict
     this.postData('/api/sign-in/', dict)
     

  3. 另外提一句：你代码里获取了密码但没加到dict里，记得补上dict['password'] = password，不然请求里缺密码字段。

内容的提问来源于stack exchange，提问作者Андрей