解决跨域问题[前后端分离，前端使用axios]

问题描述：
前端网址：http://h5.xxx.com，后端网址：http://gateway.yyy.com
前端使用axios发送ajax请求到后端，
后端使用Spring Boot，拦截器中查看到每次请求的session id都不一样，每次response的set-cookie中都包含有"SESSIONID"参数，很明显是因为前端没有把sessionid通过cookie传递给后端。

解决方案
前端请求中增加：

  const obj = Object.assign({}, config, {
    headers,
    withCredentials: true,
    crossDomain: true,
  });

后端拦截器：

  HttpServletResponse servletResponse = (HttpServletResponse) response;
  servletResponse.setContentType("application/json; charset=utf-8");  
  servletResponse.setCharacterEncoding("UTF-8");
  // 特别注意：Access-Control-Allow-Origin值不能为*，而应该是一个具体的值
  // 否则cookie一样传递不过来
  // 这里直接用request.getHeader("Origin")，其实产生的作用跟*基本一致
  servletResponse.addHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
  servletResponse.addHeader("Access-Control-Allow-Credentials", "true");
  servletResponse.addHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With,Cookies");

  if (request.getHeader("Access-Control-Request-Method") != null
    && "OPTIONS".equals(request.getMethod())) {// CORS "pre-flight" request
    servletResponse.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
    servletResponse.addHeader("Access-Control-Max-Age", "7200");
    servletResponse.setStatus(200);
    servletResponse.getWriter().write("OK");
    return;
  }

// Add 2018.03.30
这里面还有一个比较大的坑，我们在做IOS微信公众号测试时仍然发现session id每次不一致的情况，但Android微信是OK的。

原因：h5页面通过ajax访问gateway时，IOS的微信端，是无法写入cookie的。但如果先正常通过IOS微信浏览器访问gateway，正常写入cookie后，h5页面再通过ajax访问gateway，此时是可以携带gateway的cookie（即：IOS微信端浏览器对跨域的cookie，是只读模式）

因此，只需要在h5页面访问gateway之前（或者说登录之前），先在h5中location.href指向gateway，再由gateway redirect回来（这个时候，gateway的cookie已经正常写入了）后面的访问就能正常携带cookie了

response.sendRedirect(request.getHeader("referer"));

参考资料：https://blog.csdn.net/zhx19920405/article/details/51417250
感谢大神分享的解决方案

解决跨域问题[前后端分离，前端使用axios]

猜你喜欢