开发日志(20240422):一次以为是跨域但并不是跨域的问题排查记录

1. 日志

在前后端联调的时候,遇到了报错,如下图所示(现在再看感觉非常简单了),发现前一个请求通过了,但是第二个请求报错,然后看到 strict-origin-when-cross-origin 条件反射的认为是跨域配置的问题。(没有发现后端报错,具体原因后文解释)

预检请求 正式请求

然后先后修改或尝试了,后端添加跨域,Nginx 配置反向代理,前端配置代理,但是报错仍然没有任何变化。折腾了好久,感觉非常的无奈。于是考虑从跨域的理论入手,所以就去查跨域相关的信息。

跨源资源共享(CORS) - HTTP | MDN: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS

在 MDN 关于跨域的文章中,发现前面一个通过的请求是「预检请求」,用于避免跨域请求对服务器的用户数据产生未预期的影响。于是思考,既然如此,如果跨域的配置存在问题,那是不是第一个「预检请求」也无法通过呢?所以可能不一定是跨域的问题,于是先搁置了跨域配置的排查,转向接口参数等角度进行排错。

然后发现了后端的报错

txt 复制代码
2024-04-22T14:27:18.285+08:00  WARN 52096 --- [nio-8080-exec-2] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.bind.MethodArgumentNotValidException: Validation failed for argument [0] in public xxx.response.BaseResponse<xxx.model.vo.AdminLoginVo> xxx.controller.AdminController.login(xxx.model.dto.AdminLoginRequest,jakarta.servlet.http.HttpServletResponse) with 2 errors: [Field error in object 'adminLoginRequest' on field 'account': rejected value [null]; codes [NotBlank.adminLoginRequest.account,NotBlank.account,NotBlank.java.lang.String,NotBlank]; arguments [org.springframework.context.support.DefaultMessageSourceResolvable: codes [adminLoginRequest.account,account]; arguments []; default message [account]]; default message [Account cannot be blank]] [Field error in object 'adminLoginRequest' on field 'password': rejected value [null]; codes [NotBlank.adminLoginRequest.password,NotBlank.password,NotBlank.java.lang.String,NotBlank]; arguments [org.springframework.context.support.DefaultMessageSourceResolvable: codes [adminLoginRequest.password,password]; arguments []; default message [password]]; default message [User password cannot be blank]] ]
  1. 因为控制台中我关闭了自动换行,这个项目暂时还没有配置统一的异常返回,所以这条报错信息在控制台中是单行的
  2. 并且浏览器和后端控制台在不同的界面需要切换

所以之前集中精力排查跨域的时候,没有意识到这个报错。发现问题后,我重新调整了前端参数,从

ts 复制代码
// Angular
Login(account: string, password: string): Observable<any> {
    //url为登录接口
    const url = 'http://localhost:8080/api/v1/admin/session';
    const data = new Login(account, password);
    const body = { data };
    return this.http.post(url, body);
}

修改为

ts 复制代码
// Angular
Login(account: string, password: string): Observable<any> {
    //url为登录接口
    const url = 'http://localhost:8080/api/v1/admin/session';
    const body = new Login(account, password);
    return this.http.post(url, body);
}

问题成功解决。

2. 总结

因为对于跨域相关知识点存在一定的误解,再结合过往跨域问题排查的经验,导致了前期排查的方向错误。

  • 需要时刻注意各端控制台日志的输出,尽量放置在同一界面中。此外在排错的时候,先把历史输出清空,这样可以更快的发现异常。
  • 遇到问题之后,尽量尽快的熟悉一下相关的知识点,如果这次更早的意识到「预检请求」无法通过跨域,就可以更加及时的发现问题。
  • 前后端联调的经验仍不足,接口参数被 data 包裹,我以为这是 Angular 的特性,并且最初也不知道去除 data 包裹的方法,所以即使发现了传参问题,也没有在一开始引起足够的重视。

3. 补充

3.1. 预检请求无法通用跨域

在之后,我尝试了一下,关闭跨域配置后,预检请求是否真的无法通过跨域。

实际测试,关闭跨域后,确实预检请求也无法通过。


相关推荐
天天进步201526 分钟前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
乌啼霜满天2491 小时前
Spring 与 Spring MVC 与 Spring Boot三者之间的区别与联系
java·spring boot·spring·mvc
tangliang_cn1 小时前
java入门 自定义springboot starter
java·开发语言·spring boot
Grey_fantasy1 小时前
高级编程之结构化代码
java·spring boot·spring cloud
苹果酱05672 小时前
前端面试vue篇:Vue2 和 Vue3 在设计和性能上有显著区别
java·spring boot·毕业设计·layui·课程设计
刘大浪3 小时前
后端数据增删改查基于Springboot+mybatis mysql 时间根据当时时间自动填充,数据库连接查询不一致,mysql数据库连接不好用
数据库·spring boot·mybatis
一只爱撸猫的程序猿3 小时前
简单实现一个系统升级过程中的数据平滑迁移的场景实例
数据库·spring boot·程序员
攻心的子乐3 小时前
shell脚本启动springboot项目
spring boot
程序媛-徐师姐4 小时前
Java 基于SpringBoot+vue框架的老年医疗保健网站
java·vue.js·spring boot·老年医疗保健·老年 医疗保健
.生产的驴4 小时前
SpringCloud OpenFeign用户转发在请求头中添加用户信息 微服务内部调用
spring boot·后端·spring·spring cloud·微服务·架构