场景
前后端使用get发送请求的时候报错,提示信息为: 431 Request Header Fields Too Large
- 414 Request-URI Too Large:即URL过长
- 400 Request Header Or Cookie Too Large:即Header过长
- 431 Bad Message reason: Request Header Fields Too Large:即Header Fields过长(HTTP整个前半部分,包括url+header)
小记:前端URL/Header过长的几种常见服务错误细节(httpcode 414 / 431 / 400) - Lrdcq - 驴肉の空间
请求头相关简介
在前端开发中,除了画画页面写写布局以外,其他更多的时间就是与后端对调接口。
所以页面请求就是经常打交道的一个地方了,开发中通常都是通过Axios
来使用get
或者post
方式请求。
对应get
请求参数是直接拼接在url
上,而post
请求的话参数就是携带在body
里面,并且有着不同的类型。
在请求的过程中,大部分时间都是关注在接口的请求方式和参数上面,但是还有一个比较重要的地方,就是Content-Type
属性,这个属性表示请求参数以哪种方式传递给后端。
往往后端接受不到参数的其中一个原因可能就是Content-Type
设置的不对。
一般情况下,params在get请求中使用,data、json在post请求中使用。
GET和POST的区别以及传参详细解说_post传参_JerryLeeup的博客-CSDN博客
解决方案
报这个错的原因就是,http请求header过大,超过了服务器的限制。
将get请求改成post请求
前台请求发起要改成post,后台接收也需要改成post。
以axios封装实例为例:
export function addFeatureRe(params) {
return request({
url: 'http://17.16.39.22:9224/dataserver/dataServer',
// 原本的get请求方法
method: 'get',
params: { ...params, layerName: 'LSYD', f: 'json' }
// 修改成post请求方法
method: 'post',
data: { ...params, layerName: 'LSYD', f: 'json' },
// application/x-www-from-urlencoded, 会将表单内的数据转换为键值对,比如,name=java&age=23,用作于表单参数发送
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
}