前后端分离之后,请求跨域无法传递cookie的问题,最近在做公司一个小项目时遇到坑,记录一下下

it2022-05-05  149

前后端分离之后,请求跨域无法传递cookie的问题,最近在做公司一个小项目时遇到坑,记录一下下

前言跨域问题cookie问题拦截器导致的跨域问题后记

前言

那一天是我毕业后工作生涯的第30天,第一次接触前后端分离开发,我感觉好像,慢慢领悟到了前后端分离开发的真谛:或许大概可能也许是前后端甩锅开发

场景一 前台疯狂的点击页面,发送请求,但是后台服务器总是没有回应,后台接口虽打了断点,但是根本进不到断点处。。。

前端:我请求发过去了,数据格式也是对的,你接口文档就是那样写的,我按照接口文档要求写的,你服务器怎么了,你接口写的对吗,巴拉巴拉。。。。

后台:我接口文档写的很对欸,我这边postman测试可以的,我测试通过了才写的文档欸,你那边什么情况啊,你发送的请求对吗,巴拉巴拉。。。

场景二 前台登陆的时候,验证码一直校验不通过

前端:我输入的验证码,就是图片中的验证码,为什么你后台一直校验不通过啊,怎么肥四啊,你后台接口写的对吗,逻辑判断的对吗,巴拉巴拉。。。。

后台:肯定对啊,我这边我自己用postman已经测试通过了,你那边怎么搞的,我后台都获取不到你的 session 欸,巴拉巴拉。。。

跨域问题

场景一 就是典型的跨域问题,在前后端分离开发的时候,由于前后台代码不在一台服务器上了,前端页面服务器想要访问后台接口的时候,由于浏览器的 同源策略,会拒绝掉这些访问,导致后台根本收不到这些请求;

后台需要配置下;

/** * 处理跨域问题 */ @Configuration public class CorsConfig { private CorsConfiguration buildConfig() { CorsConfiguration corsConfiguration = new CorsConfiguration(); // 1允许服务端访问 corsConfiguration.addAllowedOrigin("*"); // 1.1允许本地访问 corsConfiguration.addAllowedOrigin("http://localhost:8032"); // 2允许任何头 corsConfiguration.addAllowedHeader("*"); // 3允许任何方法(post、get等) corsConfiguration.addAllowedMethod("*"); // 4 允许withCredentials报文头 corsConfiguration.setAllowCredentials(true); return corsConfiguration; } @Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", buildConfig()); return new CorsFilter(source); } }

最简单粗暴的,来自任何源的请求都接收;

cookie问题

跨域访问的时候,浏览器默认是不带cookie去的,这样导致每次后台都产生根据请求产生新的session,验证码值保存在各自的session里面,当然也就永远的检验不通过了!

前台在发送 Ajax 请求的时候,告诉浏览器允许跨域带 cookie ,(这是坑请注意。。。)写上如下;

$.ajax({ type: "POST", url: serverPath + "/api/v1/login", contentType: 'application/x-www-form-urlencoded;charset=utf-8', data: {username:$("#username").val(), password:$("#password").val(), rememberMe}, dataType: "json", xhrFields: { withCredentials: true //携带跨域cookie }, success: function(data){ if(data.code == 200){ layer.msg(data.msg); window.location.href="index.html"; }else{ layer.msg(data.msg); } }, })

拦截器导致的跨域问题

上面的问题都解决以后,最后给系统加上拦截器。跨域问题又来了。

我们需要在拦截器里面放行 options 方法,此方法是浏览器发出来的探测方法,探测目标主机是否允许跨域,结果在探测的时候,被拦截器拦截了,送出去的侦察兵音信全无,浏览器就不会向目标主机发送请求了,发出一个 cros 跨域错误

public class MyFormAuthenticationFilter extends FormAuthenticationFilter { /** * 在访问controller前判断是否登录,返回json,不进行重定向。 * @param request * @param response * @return true-继续往下执行,false-该filter过滤器已经处理,不继续执行其他过滤器 * @throws Exception */ @Override protected boolean isAccessAllowed(ServletRequest request, ServletResponse response, Object mappedValue) { if (request instanceof HttpServletRequest) { if (((HttpServletRequest) request).getMethod().toUpperCase().equals("OPTIONS")) { return true; } } return super.isAccessAllowed(request, response, mappedValue); } }

后记

多年以后,或许我说的最多的话就是:

我这边能用在我这是好使的postman测试可以通过你没清缓存吧

最新回复(0)