springboot(shiro)+vue(axios)跨域问题记录

1. 通用设置

一旦前后端分离，就涉及到跨域问题（域名、端口、协议（http或https等）其一不一样就是跨域）。 在涉及到跨域问题时，浏览器发送请求前，会优先发送一个OPTION请求。 所以，对于springboot项目，只需要自定义一下web过滤器即可。

/** * 解决跨域问题 */ @Configuration public class WebConfig extends WebMvcConfigurerAdapter { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("http://xx.xx.xx.xx:port") .allowCredentials(true) .maxAge(3600) .allowedHeaders("Accept", "Content-Type", "Origin", "Authorization", "X-Auth-Token") .exposedHeaders("X-Auth-Token", "Authorization") .allowedMethods("POST", "GET", "DELETE", "PUT", "OPTIONS"); } }

说明：

allowedOrigins:一般情况下配置"*"和配合"ip:port"都行，但是在某些情况下，出现后者可以，前者不行的问题。故先建议配成具体的ip(*后续再试即可)。allowCredentials:普通跨域，这个值无所谓，true或false都可以。（但是有shiro认证，必须为true，下文再说）allowedHeaders、allowedMethods:允许OPTION即可。 经过上述一个配置即可，前端也不需要任何配置，如前端： let instance = axios.create({ baseURL: host, timeout: 120000 })

2. 携带cookie的跨域

shiro用户认证在浏览器cookie中存在JSESSIONID信息，发送请求时，会携带信息。因此，需要前端和后端，都需要设置允许Credentials。

前端设置

加一条设置，如：

let instance = axios.create({ baseURL: host, timeout: 120000 }) instance.defaults.withCredentials = true

后端设置

也只需要在前述的WebConfig类中修改一条配置：

WebConfig ... .allowCredentials(true) ...

至此，shiro + axios跨域初步解决。

初步解决的问题有哪些呢？shiro认证拦截已经生效，未登录情况下，访问被拦截。登录之后，不会被拦截。如： /login接口：

@GetMapping("/login") public RootRespBody<Boolean> login() { Subject subject = SecurityUtils.getSubject(); if(!subject.isAuthenticated()){ return RootRespBody.failure(RootRespBody.Status.ACCESS_DENIED, "please login", false); } return RootRespBody.success(true); }

登录后访问直接成功：

{"status":200,"message":"SUCCESS","data":true}

---

3. shiro + vue

上述配置在shiro + vue的项目中并不能正常使用，原因是跨域时，请求会发送两个，一个OPTION, 一个正常的请求。 通常是OPTIONS Reqeust正常返回status 200，然后才发起正式的GET/POST等访问，但因为Shiro配置了URL过滤, 对于OPTIONS Request也进行了拦截，OPTION是没有携带cookie信息的，所以无法继续访问，后续实际的请求也就不会发送。 上述截图只发送了OPTION请求，由于该请求没通过，没有发送真正的需要的请求。

解决方法：shiro配置，允许OPTION不经过过滤器。

public class MyAuthenticationFilter extends FormAuthenticationFilter { /** * @desc 跨域时，先发送option请求，option是不携带cookie信息的，但是也被shiro拦截了导致不通过，无法发送正常请求 * 因此需要将OPTION放行。 * @param request * @param response * @param mappedValue * @return */ @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; } }

在shiro 配置中手动加上：

//以下两行配合MyAuthenticationFilter过滤器使用 Map<String, Filter> filterMap = shiroFilterFactoryBean.getFilters(); filterMap.put("authc", new MyAuthenticationFilter());

至此，完成！ 其他：后续可以考虑重定向的优化。 参考： https://www.jianshu.com/p/e56362315581