SpringBoot之vue访问shiro时出现的跨域问题的解决(前后端分离项目)

1.声明

当前的内容用于记录当前前后端分离的vue项目，并且在SpringBoot中开启了Shiro进行权限控制，此时出现的跨域的问题，以及当前的解决方法

2.一般的跨域请求

1.基于WebMvcConfigurer是实现的

 @Configuration 
public class CorsConfig implements WebMvcConfigurer {
	private Log log = LogFactory.getLog(CorsConfig.class);
	@Override
	public void addCorsMappings(CorsRegistry registry) {
		registry.addMapping("/**").allowedOrigins("*").allowCredentials(true)
				.allowedMethods("*").maxAge(3600);
		if (log.isDebugEnabled()) {
			log.debug("corsConfig setting success! and allow all to visit that application url!");
		}
		// Add more mappings...
	}

}

2.基于Filter的跨域处理

@Order(value = 0) // 不能使用AspectJ,这里存在耦合的问题，因为不知道使用的权限的名称，并且权限字符串存在变化，所以要取消变化
@WebFilter(filterName = "myCorsFilter", urlPatterns = "/*")
public class CorsFilter implements Filter {
	@Override
	public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain chain)
			throws IOException, ServletException {

		HttpServletResponse response = (HttpServletResponse) servletResponse;
		HttpServletRequest request = (HttpServletRequest) servletRequest;
		response.setHeader("Access-Control-Allow-Origin", "*");
		response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
		response.setHeader("Access-Control-Max-Age", "3600");
		response.setHeader("Access-Control-Allow-Headers", "*");
		response.setHeader("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With,token");
		response.setHeader("Access-Control-Allow-Credentials","true");
        chain.doFilter(servletRequest, servletResponse);

		
	}

}

3.分析认证后的浏览器请求i和vue的请求

认证后的浏览器请求

发现带有Shiro认证的token

vue的axios的POST访问

出现了401未认证错误，并且没有携带cookie过去，可以这么认为，cookie中包含了Shiro需要的认证信息

所以本人决定让axios请求的时候传递cookie过去，应该可以解决问题！

4.axios传递cookie的请求结果

首先为axios添加可以传递cookie的能力

import axios from 'axios'
axios.defaults.withCredentials = true// 允许当前axios携带cookie

然后执行访问

出现了在include模式下，不能设置Access-Control-Allow-Origin为*的错误

5.修改Access-Control-Allow-Origin为其他的地址

修改Access-Control-Allow-Origin

response.setHeader("Access-Control-Allow-Origin", "http://localhost:9527");

再次使用vue请求的结果

成功！成功解决了跨域中vue访问shiro的问题!

6.总结

1.通过这个案例发现要在前后端分离的项目中使用axios访问后台的shiro项目的时候，要注意cookie的携带，还有后台的Access-Control-Allow-Origin问题！

2.发现axios默认是不会携带任何的cookie,需要通过axios.defaults.withCredentials = true开启

3.axios中开启携带cookie功能的时候默认的模式为：include,该模式中响应的response中的Access-Control-Allow-Origin不能为*，必须确定

4.shiro的权限认证是通过浏览器的Cookie来实现的

以上纯属个人见解，如有问题请联系本人！