目录

当输入没有注册的用户名和密码,直接跳转到了一个404页面是怎么回事

当输入没有注册的用户名和密码,直接跳转到了一个404页面是怎么回事

一、问题描述:

当我输入没有注册的用户名和密码,直接给我跳转到了一个404页面,而不是显示提醒弹窗“账号或密码错误!”

我想要的正确效果如下:

https://i-blog.csdnimg.cn/direct/6f72cdd6ff814285b659513d4363785e.png

二、分析

https://i-blog.csdnimg.cn/direct/a3cecfb7520041418b365736c3120c30.png

1.点击登录时发现后端在处理请求时抛出了一个异常: MissingServletRequestParameterException ,具体原因是 缺少必需的请求参数 uname!

2.那么我们去看看前端的uname值有没有 正确传递到后端,我们可以在发送请求前打印它的值看看:

console.log 放在 axios 请求之前,确保在发送请求前打印出 ruleForm.value.uname 的值。

https://i-blog.csdnimg.cn/direct/8be9c7ec04354be4a853f6fdd460532b.png 然后在控制台console可以看到:

https://i-blog.csdnimg.cn/direct/40e7b45c2c144547a39848e8559abdb3.png

图中有用户名和密码!!说明这里我的 前端代码是正确传递了 unamepassword 参数的!!

当时虽然参数都正确了,但请求仍然失败,返回了 400 Bad Request 错误!!!(这个图是我后面成功了才截的,所以看不到)

400 Bad Request 错误的原因?

400 错误通常表示客户端发送的请求有问题,服务器无法正确处理。

最终解决措施如下:

(1)如果你的后端接口使用 @RequestBody ,那么前端需要以 JSON 形式传递参数。即

  headers: {
    'Content-Type': 'application/json', // 使用 JSON 格式
  },

(2)如果后端接口使用的是 @RequestParam ,那么前端需要以 表单 形式传递参数。即

  headers: {
    'Content-Type': 'application/x-www-form-urlencoded', // 使用表单格式
  },

我的错误在于:我的后端是 @RequestParam ,而前端是’application/json’,搞反了

===============

至此,终于跳转不是404页面!大功告成!!!