近日，在写博客系统登录页面的时候，测试登录功能发现一直报错，通过排查便可以发现是 前后端数据格式的问题，此问题为很多同学在进行前后端交互传递数据时，经常会犯的错误，特此记录✍
排查过程捕捉
- 首先我们用浏览器自带的 开发调试工具，若是不会使用抓包工具的同学便可以使用这个工具，非常得方便哦！
- 然后我们看到，在输入用户名和密码，点击【登录】按钮后向后端的
/user/login路由发送了一个请求，通过图示中的Payload我们可以看到，浏览器自带的负载是有数据的。但是来到Preview中却看到，后端发还回来一个 ==参数有误== 的响应，那看到这个响应之后我马上就知道是 前端所传递的用户名或者密码为空导致的！
但是呢从上面的第一张图我们可以看到前端是有传递数据过去的，但为什么后端所接收到的数据为空呢？我们马上来调试观察一下吧:mag:
- 通过调试我们立马可以观察到，后端所接收到的
username和password为 null，
- 但是通过【Fiddler】抓包却可以观察到，前端在发送了POST请求后，其报文中的
body是带有数据的，而且是json格式的
👉 此时我们可以初步断定是传递过程中的前后端数据交互的问题
接下去我们就用神奇【postman】来造一些数据进行发送吧！
- 对于 url 中
?后的查询字符串 queryString 我们使用的是 键值对的形式，即这里的username=admin&password=ad123
- 那么此时我们再到IDEA的调试控制台中来看便可以发现后端接收到的数据不为空了，仔细思考一下是哪里出问题了呢:smile:
异常解决
此时这个问题已经很明显了，其实就出在这个传递的数据格式中
❌ 对于表单的提交格式不应该是下面的json格式
js
'Content-Type': 'application/json'✔ 而应该是下面的x-www-form-urlencoded表单格式
js
'Content-Type': 'application/x-www-form-urlencoded' - 那此时在前端中，我们把这个请求头中的【Content-Type】去做一个修改即可
- 在修改了前端代码后我们再去重启一下项目，重新发送一下请求便可以发现后端成功接收到了前端的发送过来的数据！
小结
从以上的排查过程我们可以看出对于前后端分离的项目，数据格式的统一性是多么的重要，望本文对您有所帮助:rose:
