vue项目本地启动服务器访问接口时报431（Request Header Fields Too Large）请求头字段过长 错误

在做项目的时候，需要用户上传头像图片设置头像。将图片进行转base64码后进行put请求结果返回431错误。Request Header Fields Too Large，查询资料后发现是文件请求字段过长，导致了请求都还没传到服务器就被拦截了，直接返回431错误。

解决方法：

1，分析问题：Request Header Fields Too Large，文件请求头过长，之前在get请求的时候也返回了这个问题，但是明明get是没有带任何请求头的，也返回了431错误。经过一般摸索过后，发现问题出现在了token上。

2，定位问题，之前没有这个报错是因为还没有在token中加入头像avatar这个字段。在这之前，我们先来了解一下登录成功后返回的token里面是包含哪些内容的

        生成的token结构是：header.payload.signature

 3个信息分别由点号隔开，而用户存储的信息是放在payload中的，payload，它包含声明（要求）。声明是关于实体(通常是用户信息，也就是程序员放入token中的数据)和其他数据的声明。payload的长度随着程序员放进去的数据的增加而增多。对payload进行Base64编码就得到JWT的第二部分。之前在写token的时候没有注意到这个问题，一股脑的把用户的个人信息都往token里面塞了，这是非常不好的。

我之前就在里面放了头像的信息，想着可以直接在vue中直接获取到头像的信息。结果报请求头过长错误了，这个时候的token信息中还包含了图片转base64之后的编码，长度是非常长的。所以才报431错误了。

需注意，不要在payload或header中放置敏感信息，除非它们是加密的。

3，解决问题

在注册接口使用JWT时修改rules放的值，我之前是这样放的，avatar放的是头像的base64码

结果在postman测试时返回token的时候token值的长度就非常可怕了

 

后来将avatar:user.avatar 上传头像信息的这一部分去掉就可以了。

这时候有人就要问了，那这样的话前端怎么获取用户信息。 很简单，直接写一个get接口，获取到登录用户的所有个人信息就可以解决了