背景
最近做一个前后端分离的项目时,遇到了一系列跨域访问的相关问题,这里做一下总结,也希望能对遇到同样问题的同学有所帮助.
后端主要采用技术体系:
- SpringBoot 2.0.1.RELEASE
- Shiro 1.4.0
- Spring Data JPA 2.0.6.RELEASE
前端采用技术体系:
- ReactJS
- Ant Design
问题
1. redirect问题
现象:
后端通过Shiro配置URL过滤,
shiroFilterFactoryBean.setLoginUrl("/unauth");
默认对于没有授权的访问请求会redirect至LoginUrl.但在跨域访问时,redirect失败.原因是基于安全考虑,redirect发生时Response Header的信息会被清除,导致client端的访问被server端拒绝.
解决方案:
前后端分离的场景下, client端并不需要服务端发起的redirect, 只要获取一个没有授权的状态码,然后自行控制跳转即可. 所以让Shiro在鉴权失败后不要redirect,而是返回status 401. 通过自定义AuthenticatingFilter实现.
public class MyAuthenticationFilter extends FormAuthenticationFilter {
@Override
protected boolean onAccessDenied(ServletRequest request, ServletResponse response)
throws Exception {
WebUtils.toHttp(response).sendError(HttpServletResponse.SC_UNAUTHORIZED);
return false;
}
}
然后配置ShiroFilterFactoryBean注入MyAuthenticationFilter, 这里要注意不要将MyAuthenticationFilter通过@Bean交给Spring托管,会被自动注册至FilterChain,从而导致ShiroFilter默认的其他filter无效. 可参考Shiro 自定义 filter 匹配异常
Map<String, Filter> filterMap = shiroFilterFactoryBean.getFilters();
filterMap.put("authc", new MyAuthenticationFilter());
经过这样的配置后, 对于没有授权的Request, Shiro就仅返回401, client端做相应判断即可, 这里还有一些小Tips:
前端使用Fetch Api进行请求, 当接收到一个代表错误的 HTTP 状态码时, 如401, 不会进入exception catch, 可正常进行response.status判断:
fetch(...).then(res => {
if (res.status === 401) {
history.push('/login');
return Promise.reject('Unauthorized.');
}
})
而axios则是在异常捕获中判断:
axios(...).then(...).catch(error => {
if (error.response.status === 401) {
history.push('/login');
return Promise.reject('Unauthorized.');
}
})
2. OPTIONS Request问题
现象
关于什么是OPTIONS Request, 可以参考浏览器跨域方法与基于Fetch的Web请求最佳实践,简单来说,是在跨域访问的场景下, 正式访问之前增加的一次预检性质访问,以确定能否正确获取所请求的资源.
通常是OPTIONS Reqeust正常返回status 200,然后才发起正式的GET/POST等访问,但因为Shiro配置了URL过滤, 对于OPTIONS Request也进行了拦截,所以无法继续访问.
解决方案
让Shiro对OPTIONS Request不进行鉴权操作, 在MyAuthenticationFilter基础上增加isAccessAllowed方法即可.
public class MyAuthenticationFilter extends FormAuthenticationFilter {
@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);
}
@Override
protected boolean onAccessDenied(ServletRequest request, ServletResponse response)
throws Exception {
WebUtils.toHttp(response).sendError(HttpServletResponse.SC_UNAUTHORIZED);
return false;
}
}
