开发日志(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. 预检请求无法通用跨域

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

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


相关推荐
苹果醋31 小时前
Java8->Java19的初步探索
java·运维·spring boot·mysql·nginx
Wx-bishekaifayuan1 小时前
django电商易购系统-计算机设计毕业源码61059
java·spring boot·spring·spring cloud·django·sqlite·guava
customer081 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
LuckyLay3 小时前
Spring学习笔记_27——@EnableLoadTimeWeaving
java·spring boot·spring
佳佳_4 小时前
Spring Boot 应用启动时打印配置类信息
spring boot·后端
程序媛小果4 小时前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot
狂放不羁霸7 小时前
idea | 搭建 SpringBoot 项目之配置 Maven
spring boot·maven·intellij-idea
计算机学长felix7 小时前
基于SpringBoot的“校园交友网站”的设计与实现(源码+数据库+文档+PPT)
数据库·spring boot·毕业设计·交友
码农派大星。7 小时前
Spring Boot 配置文件
java·spring boot·后端