content-type: application/json

标题的解释

用了这么一个字符串当标题,是希望能后帮助到遇到相关问题的人.

问题描述

有这么一个接口,postman(或其他API测试工具)能够跑通,但是从浏览器的前端代码里发出去就错了,服务器报500,那么很有可能遇到了这个问题:content-type的设置和服务器期望的不一样.

现在后端通常会希望获取到json格式的数据,所以通常请求的headers里要设置content-type:application/json

headers: {
    "Content-Type": "application/json",
}

一般来说这么做是没有问题的,但是就怕忘了设置header,又多此一举的改变了body中数据的类型:

fetch('url', {
    method: 'POST',
    body: JSON.stringify({
        xxx:xxx,
    }),
})

就是这么多此一举,

后端希望得到json, 于是我自己将post数据的body变成了一个json字符串,同时我又忘记设置了header的content-type,会出现什么呢?从开发者工具看到请求的header里的content-type变成了text/plain,所以服务器拿不到数据json,和期望的数据不同,自然就很有可能跑挂了,报500的可能性就很大了.

其实浏览器是很智能的.

如果没有设置header的conten-type, 在body中传递了对象

fetch('url', {
    method: 'POST',
    body: {
        xxx:xxx,
    },
})

浏览器会自动将content-type改成application/json,

如果是用了formdata

const body = new FormData()
body.append('xxx', 'xxx')
fetch('url', {
    method: 'POST',
    body,
})

浏览器也可以很好的识别出请求的content-type,

所以如果可以的话, 尽量不要自己设置这个字段了,用正确的数据类型去告诉浏览器要用什么content-type就可以了