414、400或431状态码-请求头过长导致请求失败

场景

前后端使用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'
    }
  });
}