前后端分离之后，请求跨域无法传递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测试可以通过
• 你没清缓存吧