Vue3 + Spring WebMVC 验证码案例中的跨域问题与解决方法

               

        最近在基于vue3 + SpringWebMVC前后端分离的开发环境中实现一个验证码的案例，在开发过程中遇到了一些复杂的跨域问题，现已解决，故将解决方法分享，希望能帮到有需要的人。

        出现的问题：

        对于验证码的实现，我选择引入第三方Jar包，在开发至验证码校验时，此时正常逻辑为：前端向后端请求验证码图片，后端返回验证码图片并设置cookie，将正确验证码存储至session中；当用户提交验证码后，前端会发送ajax请求携带用户输入信息给后端，后端根据请求所携带的cookie从session中获取正确验证码与用户输入进行比对，然后返回校验结果。

        在实际开发中，前端请求验证码图片时，后端返回了图片并设置了cookie，但在提交验证码时，请求未携带cookie，导致后端无法从session中获取正确的验证码。

        问题原因分析：

        我在进行代码排查时，发现校验请求所设置的session存在如下提示，即：set-cookie没有指定SameSite属性，默认为Lax。

        SameSite是cookie中的一个属性，用于控制cookie在跨站请求时的发送策略，其属性值存在三个，如下：
        SameSite=Strict：最为严格，cookie仅在相同站点进行发送

        SameSite=Lax：相对宽松，在跨站顶级