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'
    }

  });
}

你可能感兴趣的:(前端)