问题背景

在一次使用Chrome开发者工具调试中，发现找不到接口参数了，但仔细检查代码后以及结合接口响应数据来看确确实实是传参数了的，并且后端也正常接收到了请求数据，当时没有深入探究原因，现在对这个问题进行一下复盘。

接口数据传输的方式

Payload和Form Data是接口数据传输的两种方式，浏览器通过Content-Type来进行区分使用哪种方式：

当值为application/x-www-form-urlencoded或multipart/form-data时，是Form Data方式
当值为application/json时，是Request Payload方式
Request Payload
如下代码所示，使用axios发起post请求，设置请求头'Content-Type':'application/json'，成功发起请求后可在调试工具Payload Tab面板中看到请求参数。Request Payload通常用于发送JSON 或 XML格式的数据。
```
axios.post(host + '/payload', {
  username: 'admin',
  password: 'admin',
}, {
  headers: {
    'Content-Type': 'application/json'
  }
}).then((res) => {
  console.log(res)
}).catch((err) => {
  console.log(err)
})
```
Form Data
如下代码所示，设置请求头'Content-Type':'application/x-www-form-urlencoded'，请求参数使用Qs插件进行序列化后使用axios发送，在调试工具Payload Tab面板中可看到请求参数为Form Data类型。Form Data类型通常用于发送表单数据，并且可用来进行上传文件。
```
axios.post(host + '/payload', Qs.stringify({
  username: 'admin',
  password: 'admin',
}), {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
}).then((res) => {
  console.log(res)
}).catch((err) => {
  console.log(err)
})
```
如上图所示，再点击view source后，可看到实际上传输的数据是一个字符串，由于设置了正确的Content-Type，可以被浏览器正常识别。但如果请求参数不进行序列化，还是用Form Data方式进行请求，浏览器依然是能够正常发送出请求的，并且浏览器的Payload将会显示：

但是如果Server端如果仍按照Form Data方式对请求参数处理，那么可能会出错。所以，请求参数一定要和Content-Type是对应的，否则可能会影响Server端对请求参数的正常解析。
Query String Parameters
另外在Chrome中，Query参数也会被放到Payload中，如下图所示：

注：Chrome 96版本前，Request Payload和Form Data信息是在HeadersTab中的，96版本之后它们都被放到了PayloadTab中。
问题复现
所发生问题的接口参数是Request Payload格式的，并且注意到其中有个对象数据量是很大的，因此根据这一特征构造一个请求尝试复现问题：

如图所示，通过循环构造了一个长字符串作为对象data属性值，经过调整不同的循环次数进行测试，确定了当Content-Length超过10000000字节时Payload Tab就会消失，并且Preview和Response显示“Failed to load response data: request content was evicted from inspector cache”。

这句话翻译为中文意思是“未能加载响应数据：请求内容已从检查器缓存中收回”，大概意思就是由于超出缓存限制，请求参数以及响应参数都不能正常显示了。通过观察后端接口的请求以及浏览器请求状态码（200 OK）可知，虽然调试工具不显示请求以及响应数据，但实际上是没有影响接口的正常请求以及响应的，并且前端也能够正常接收到后端响应数据，也就是说这个问题是不影响项目的正常运行的。
另外通过测试发现，当Server端的响应数据过长时，在浏览器调试工具中也会发生同样的事情，而且也不会实际影响接口数据的响应。
问题原因
通过查询发现以下一些情况都可能导致此问题：
请求的请求数据超过了浏览器的缓存限制
请求的响应数据超过了浏览器的缓存限制
在浏览器的开发者工具中查看了大量的请求，并超过了浏览器的缓存限制
电脑可用内存不足