2018年的第一篇博客，新的开始，新的起点

前几天在写一个利用cookie存储token的登陆demo时遇到了跨域丢失token的问题，在这里分享一下解决的方法。

案例分析

• 前端使用了vue-reource的$http进行请求后台接口

this.$http({
              url: "http://120.24.5.178:8100/user/login",
              method: "POST",
              body: JSON.stringify({
                username: this.ruleForm.username,
                password: this.ruleForm.password
              }),
              headers: {
                "Content-Type": "application/json"
              }
            })

• 登陆完成后，服务端监控发现无法拿到cookie，下面看几张前端控制台监控的图

• 无法拿到cookie时的监控图
  
  

• 后台cors代码

@Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) res;
        String origin = request.getHeader("Origin");
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods",
                "GET, POST, PUT, DELETE, OPTIONS");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Headers",
                "Origin, X-Requested-With, Content-Type, Accept, Authorization");

        chain.doFilter(req, res);

    }

• 后台获取cookie的代码

Cookie[] cookies = request.getCookies();
        if (cookies != null) {
            for (Cookie cookie : cookies) {
                if ("ticket".equals(cookie.getName())) {
                    String value = null;
                    if (!StringUtils.isEmpty(cookie.getValue())) {
                        value = DigestUtil.Decrypt(cookie.getValue());
                    }
                    User login = userService.findByTicket(value);
                    request.getSession().setAttribute("user", login);
                    log.info("ticket: " + value);
                    log.info("user: " + login);
                }
            }
        }

• 因为request中没有cookies，所以后台获取为null

• 经过上网查资料修改后的监控图片

• 我们可以发现在request中多了cookie这个字段，并且在cookies中有了ticket，后台可以通过request.getCookies()进行获取了

解决方法

• 最后定位到了这是一个跨域问题，在跨域时cookie被丢弃。
• 前端：请求时增加withCredentials: true

• 后端：

  • 直接使用*来匹配所有域名只能适用于无需使用cookie的场景
  • 可以将origin的*替换为允许请求的正则表达式
  • 可以加入一个list列表，代表请求白名单

      List<String> allowedOrigins = Arrays.asList("http://localhost:8080", "http://localhost:8100", "http://login.stalary.com");
      response.setHeader("Access-Control-Allow-Origin", allowedOrigins.contains(origin) ? origin : "");
  

  • 也可以直接拿到前端的第一次options请求的header来进行跨域处理

  String origin = request.getHeader("Origin");
      response.setHeader("Access-Control-Allow-Origin", origin);

本次简单的跨域丢失cookie的处理就介绍到这里了，如有问题可以私信博主qq
登陆demo地址
登陆demo源码地址
登陆demo-swagger接口地址

服务器是学生机，访问较慢，请见谅。

每一次知识的积累，都是明天你微笑的源泉