一、背景最近在做一个 Spring Boot 2.x Vue 的前后端分离项目部署时使用 Nginx 1.20.2 作为反向代理。前端页面能正常打开但点击登录按钮后没有任何反应没有跳转没有提示像死了一样。打开浏览器 F12 查看网络请求发现登录接口返回了 404。于是开始了漫长的踩坑之旅。二、环境说明组件版本Spring Boot2.xJDK8Nginx1.20.2前端Vue 2.x数据库MySQL操作系统Windows三、踩坑实录第一阶段Nginx 路径不匹配 → 404现象F12 网络面板显示请求POST /api/employee/login返回 404。查看 Nginxaccess.log发现请求确实到了 Nginx127.0.0.1 - -[08/Aug/2026:21:04:34 0800]POST /api/employee/login HTTP/1.140496排查过程后端接口路径为RestControllerRequestMapping(/admin/employee)publicclassEmployeeController{PostMapping(/login)publicResultEmployeeLoginVOlogin(RequestBodyEmployeeLoginDTOlogin){// ...}}即完整路径为/admin/employee/login。而 Nginx 配置中location /api/ { proxy_pass http://127.0.0.1:8080/; }由于proxy_pass末尾带//api/employee/login被转发成了/employee/login少了一层/admin导致后端匹配不到接口。解决方案location /api/ { proxy_pass http://127.0.0.1:8080/admin/; # 加上 /admin/ proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; }第二阶段配置变量错误 → 502现象F12 网络面板中偶尔出现 502 Bad Gateway。排查过程配置中有一行proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;但由于 Windows 记事本字体渲染问题下划线在屏幕显示上容易被误认为空格导致 Nginx 解析时无法识别该变量从而报错。解决方案删掉X-Forwarded-For相关配置非必须或者确保变量名拼写完全正确。精简后的配置location /api/ { proxy_pass http://127.0.0.1:8080/admin/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; }提示X-Forwarded-For用于获取客户端真实 IP在登录功能中非必须删除不影响正常使用。第三阶段浏览器直接访问 → 400 Bad Request现象为了验证后端是否正常直接在浏览器地址栏访问http://127.0.0.1:8080/admin/employee/login返回 Spring Boot 默认的 400 Bad Request 白页。排查过程后端接口使用PostMapping(/login)只接受 POST 请求。浏览器地址栏访问默认是 GET 请求因此返回 400。解决方案使用 Postman/ApiFox 等工具发送 POST 请求进行测试或者确保前端登录请求为 POST 方式。提示F12 网络面板中可以看到前端请求的方法类型确认是 POST 即可。第四阶段转发成功但密码错误现象Nginx 转发成功后登录接口返回 200但响应内容为{code:0,msg:密码错误,data:null}排查过程查看后端EmployeeServiceImpl.login方法publicEmployeelogin(EmployeeLoginDTOemployeeLoginDTO){StringusernameemployeeLoginDTO.getUsername();StringpasswordemployeeLoginDTO.getPassword();EmployeeemployeeemployeeMapper.getByUsername(username);if(employeenull){thrownewAccountNotFoundException(账号不存在);}// 密码比对 — 先加密再比对passwordDigestUtils.md5DigestAsHex(password.getBytes());if(!password.equals(employee.getPassword())){thrownewPasswordErrorException(密码错误);}if(employee.getStatus()StatusConstant.DISABLE){thrownewAccountLockedException(账号被锁定);}returnemployee;}前端传入的明文密码会被 MD5 加密后再与数据库比对。查看数据库employee表发现密码字段存的是明文123456而 MD5 加密后的123456为e10adc3949ba59abbe56e057f20f883e二者不匹配。原因分析项目初始化时导入的 SQL 脚本直接插入了明文密码但代码中一直存在 MD5 加密比对逻辑导致历史数据与代码逻辑不一致。解决方案将数据库中密码字段更新为 MD5 密文UPDATEemployeeSETpassworde10adc3949ba59abbe56e057f20f883eWHEREusernameadmin;更新后使用明文密码123456登录成功。第五阶段一劳永逸的解决方式为了让后续新增的员工不再出现同样的问题修改新增员工代码存入数据库前自动加密employee.setPassword(DigestUtils.md5DigestAsHex(PasswordConstant.DEFAULT_PASSWORD.getBytes()));其中PasswordConstant.DEFAULT_PASSWORD定义为publicstaticfinalStringDEFAULT_PASSWORD123456;这样所有新增员工都会自动加密存储登录时加密比对即可匹配。四、最终 Nginx 配置server { listen 80; server_name localhost; location / { root html/sky; index index.html index.htm; } error_page 500 502 503 504 /50x.html; location /50x.html { root html; } # 反向代理 — 管理端 location /api/ { proxy_pass http://127.0.0.1:8080/admin/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } # 反向代理 — 用户端 location /user/ { proxy_pass http://webservers/user/; } # WebSocket location /ws/ { proxy_pass http://webservers/ws/; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection upgrade; proxy_read_timeout 3600s; } }五、如何快速排查类似问题如果以后再遇到前端请求无响应的情况按这个顺序查看 F12 网络面板确认请求 URL、状态码、响应内容。看 Nginx access.log确认请求是否到达 Nginx。看后端控制台在接口入口加System.out.println(请求进来了)确认请求是否进入后端。直接测后端接口用 Postman 发请求绕过 Nginx确认后端本身是否正常。六、总结这次登录踩坑经历本质上是三个独立问题的叠加Nginx 路径转发问题proxy_pass路径要匹配后端接口的完整路径。数据库历史数据问题SQL 脚本存的明文与代码加密逻辑不一致。配置文件编码/显示问题下划线在部分编辑器中显示异常影响配置解析。排查时冷静分析从 F12 出发逐层向上游Nginx → 后端 → 数据库推进总能定位到根因。希望这篇踩坑记录能帮到遇到类似问题的朋友。 记一次 Spring Boot + Nginx 登录踩坑实录：从 404 → 502 → 400 → 密码错误，最终 200
一、背景最近在做一个 Spring Boot 2.x Vue 的前后端分离项目部署时使用 Nginx 1.20.2 作为反向代理。前端页面能正常打开但点击登录按钮后没有任何反应没有跳转没有提示像死了一样。打开浏览器 F12 查看网络请求发现登录接口返回了 404。于是开始了漫长的踩坑之旅。二、环境说明组件版本Spring Boot2.xJDK8Nginx1.20.2前端Vue 2.x数据库MySQL操作系统Windows三、踩坑实录第一阶段Nginx 路径不匹配 → 404现象F12 网络面板显示请求POST /api/employee/login返回 404。查看 Nginxaccess.log发现请求确实到了 Nginx127.0.0.1 - -[08/Aug/2026:21:04:34 0800]POST /api/employee/login HTTP/1.140496排查过程后端接口路径为RestControllerRequestMapping(/admin/employee)publicclassEmployeeController{PostMapping(/login)publicResultEmployeeLoginVOlogin(RequestBodyEmployeeLoginDTOlogin){// ...}}即完整路径为/admin/employee/login。而 Nginx 配置中location /api/ { proxy_pass http://127.0.0.1:8080/; }由于proxy_pass末尾带//api/employee/login被转发成了/employee/login少了一层/admin导致后端匹配不到接口。解决方案location /api/ { proxy_pass http://127.0.0.1:8080/admin/; # 加上 /admin/ proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; }第二阶段配置变量错误 → 502现象F12 网络面板中偶尔出现 502 Bad Gateway。排查过程配置中有一行proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;但由于 Windows 记事本字体渲染问题下划线在屏幕显示上容易被误认为空格导致 Nginx 解析时无法识别该变量从而报错。解决方案删掉X-Forwarded-For相关配置非必须或者确保变量名拼写完全正确。精简后的配置location /api/ { proxy_pass http://127.0.0.1:8080/admin/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; }提示X-Forwarded-For用于获取客户端真实 IP在登录功能中非必须删除不影响正常使用。第三阶段浏览器直接访问 → 400 Bad Request现象为了验证后端是否正常直接在浏览器地址栏访问http://127.0.0.1:8080/admin/employee/login返回 Spring Boot 默认的 400 Bad Request 白页。排查过程后端接口使用PostMapping(/login)只接受 POST 请求。浏览器地址栏访问默认是 GET 请求因此返回 400。解决方案使用 Postman/ApiFox 等工具发送 POST 请求进行测试或者确保前端登录请求为 POST 方式。提示F12 网络面板中可以看到前端请求的方法类型确认是 POST 即可。第四阶段转发成功但密码错误现象Nginx 转发成功后登录接口返回 200但响应内容为{code:0,msg:密码错误,data:null}排查过程查看后端EmployeeServiceImpl.login方法publicEmployeelogin(EmployeeLoginDTOemployeeLoginDTO){StringusernameemployeeLoginDTO.getUsername();StringpasswordemployeeLoginDTO.getPassword();EmployeeemployeeemployeeMapper.getByUsername(username);if(employeenull){thrownewAccountNotFoundException(账号不存在);}// 密码比对 — 先加密再比对passwordDigestUtils.md5DigestAsHex(password.getBytes());if(!password.equals(employee.getPassword())){thrownewPasswordErrorException(密码错误);}if(employee.getStatus()StatusConstant.DISABLE){thrownewAccountLockedException(账号被锁定);}returnemployee;}前端传入的明文密码会被 MD5 加密后再与数据库比对。查看数据库employee表发现密码字段存的是明文123456而 MD5 加密后的123456为e10adc3949ba59abbe56e057f20f883e二者不匹配。原因分析项目初始化时导入的 SQL 脚本直接插入了明文密码但代码中一直存在 MD5 加密比对逻辑导致历史数据与代码逻辑不一致。解决方案将数据库中密码字段更新为 MD5 密文UPDATEemployeeSETpassworde10adc3949ba59abbe56e057f20f883eWHEREusernameadmin;更新后使用明文密码123456登录成功。第五阶段一劳永逸的解决方式为了让后续新增的员工不再出现同样的问题修改新增员工代码存入数据库前自动加密employee.setPassword(DigestUtils.md5DigestAsHex(PasswordConstant.DEFAULT_PASSWORD.getBytes()));其中PasswordConstant.DEFAULT_PASSWORD定义为publicstaticfinalStringDEFAULT_PASSWORD123456;这样所有新增员工都会自动加密存储登录时加密比对即可匹配。四、最终 Nginx 配置server { listen 80; server_name localhost; location / { root html/sky; index index.html index.htm; } error_page 500 502 503 504 /50x.html; location /50x.html { root html; } # 反向代理 — 管理端 location /api/ { proxy_pass http://127.0.0.1:8080/admin/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } # 反向代理 — 用户端 location /user/ { proxy_pass http://webservers/user/; } # WebSocket location /ws/ { proxy_pass http://webservers/ws/; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection upgrade; proxy_read_timeout 3600s; } }五、如何快速排查类似问题如果以后再遇到前端请求无响应的情况按这个顺序查看 F12 网络面板确认请求 URL、状态码、响应内容。看 Nginx access.log确认请求是否到达 Nginx。看后端控制台在接口入口加System.out.println(请求进来了)确认请求是否进入后端。直接测后端接口用 Postman 发请求绕过 Nginx确认后端本身是否正常。六、总结这次登录踩坑经历本质上是三个独立问题的叠加Nginx 路径转发问题proxy_pass路径要匹配后端接口的完整路径。数据库历史数据问题SQL 脚本存的明文与代码加密逻辑不一致。配置文件编码/显示问题下划线在部分编辑器中显示异常影响配置解析。排查时冷静分析从 F12 出发逐层向上游Nginx → 后端 → 数据库推进总能定位到根因。希望这篇踩坑记录能帮到遇到类似问题的朋友。