2023.01.31 - 出现414、400或者431状态码有关请求头过长导致请求失败的问题

前端请求,相应结果或者控制台报错状态码414、400或者431都是有关请求头太长导致请求失败的问题，都是请求头部太长导致的。

请求头相关简介

• 前言 在前端开发中，除了画画页面写写布局以外，其他更多的时间就是与后端对调接口，所以页面请求就是经常打交道的一个地方了，开发中通常都是通过Axios来使用get或者post方式请求了。
  对应get请求参数是直接拼接在url上的，而post请求的话参数就是携带在body里面的，并且有着不同的类型。
• 介绍 在请求的过程中，大部分时间都是关注在接口的请求方式和参数上面，但是还有一个比较重要的地方，就是Content-Type属性，这个属性表示请求参数以哪种方式传递给后端。
  往往后端接受不到参数的其中一个原因可能就是Content-Type设置的不对。

关于请求方式application/json|x-www-form-urlencoded和multipart/form-data的简单区别

解决方法

将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'
    }
  });
}

AxiosAPI调用

// qs库来进行序列化后请求
import qs from 'qs';
(function(params) {
  // 发起post请求
  return axios.post(
      "http://17.16.39.22:9224/dataserver/dataServer",
    qs.stringify({ ...params }),
    {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    }
  );
})()

application/x-www-form-urlencoded

这种格式的话，需要参数以这种形式传递：a=1&b=2&c=3；通过&来分开，在使用Axios请求时需要使用qs库来进行序列化后请求，否则就会出现错误的请求，例如下面：

axios.post('https://demo', {
  name: 'Diana',
  age: 24
}, {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

在请求载荷中，下面的参数格式是错误的：

通过qs库序列化后的载荷如下：

axios.post('https://demo', qs.stringify({
  name: 'Diana',
  age: 24
}), {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

注意
如果是中文或特殊字符如"/"、","、“:" 等会自动进行URL转码

参考文章

1、(各种方法都有讲到)Http请求-url-请求头 请求体 大小长度限制https://blog.csdn.net/cf18435109165/article/details/106918852

2、(服务端相关)nginx的header大小设置 https://github.com/vislee/leevis.com/issues/85

主要内容：ngx提供了下面两个配置指令来设置可接收请求的header的大小。client_header_buffer_size默认大小为1k，对于大部分的请求够用了。如果有超大header的请求超过1k大小，nginx还会根据large_client_header_buffers默认4个8k的配置来分配8k内存处理，不会分配超过4块8k内存的。
请求包含了请求行和请求头还有body。
如果请求行大于large_client_header_buffers设置的size会返回414，也就是说请求行大于默认的8k就会返回414。
如果请求头的一个key value长度超过large_client_header_buffers设置的size会返回494，494可能是非标准code，nginx最终返回用户的是400，在body中会有"Request Header Or Cookie Too Large"类似的内容。
或者如果请求行和请求头超过large_client_header_buffers配置的num个size大小的内存也会返回494。