标题的解释
用了这么一个字符串当标题,是希望能后帮助到遇到相关问题的人.
问题描述
有这么一个接口,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就可以了