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

本文最后更新于 2024年4月22日 晚上

1. 日志

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

预检请求 正式请求
预检请求 正式请求

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

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

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

然后发现了后端的报错

1
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. 并且浏览器和后端控制台在不同的界面需要切换

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

1
2
3
4
5
6
7
8
// 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);
}

修改为

1
2
3
4
5
6
7
// 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. 预检请求无法通用跨域

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

预检请求,无法通用跨域

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



开发日志(20240422):一次以为是跨域但并不是跨域的问题排查记录
https://blog.cc01cc.cn/2024/04/22/log-developer-20240422-cors-but-not/
作者
零一/cc01cc(zeo)
发布于
2024年4月22日
更新于
2024年4月22日
许可协议