前后端分离单点登录

单点登录基于 Apereo CAS实现，不是此次记录的重点。

登陆过程中，需要重定向至CAS Server，前端Vue+axios，需要从单页面跳转至login页面，后端如果使用response.sendRedirect()，返回302，axios并不能拦截到302，浏览器会自动跳转，就会出问题。

解决：

后端判断请求是否是axios(Ajax)请求，如果是，不返回302，约定一个返回码，我用的是401，前端axios在response中拦截到401错误，由前端利用window.location=xxx进行跳转。

踩坑：

如何判断Ajax请求，网上搜索得知，判断reques.getHeader("X-Requested-With")，如果是XMLHttpRequest，那么就是Ajax请求。但是不知道是什么问题，请求中并没有“X-Requested-With”这个请求头,遂在axios的config中设置了headers如下：

  headers: {
    'X-Requested-With': 'XMLHttpRequest'
  }

就又踩一坑，由于自定义了请求头，请求变成了复杂请求，浏览器会先发一个预检请求(OPTIONS方法），通过预检之后才会发真正的请求(GET,POST等），因此后端要处理预检请求：

if (request.getMethod().equals("OPTIONS")) {
//处理预检请求
response.setStatus(HttpStatus.SC_NO_CONTENT);
response.addHeader("Access-Control-Max-Age", "86400");
response.setHeader("Access-Control-Allow-Methods", "*");
response.setHeader("Access-Control-Allow-Headers","x-requested-with");
response.setHeader("Access-Control-Allow-Origin", “xxx”);
response.setHeader("Access-Control-Allow-Credentials", "true");
} else {
//处理真正的请求
}

在处理真正的请求时，就要按照解决办法来操作。