SpringBoot之vue访问shiro时出现的跨域问题的解决(前后端分离项目)
1.声明当前的内容用于记录当前前后端分离的vue项目,并且在SpringBoot中开启了Shiro进行权限控制,此时出现的跨域的问题,以及当前的解决方法2.一般的跨域请求1.基于WebMvcConfigurer是实现的@Configurationpublic class CorsConfig implements WebMvcConfigurer {private Log log...
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来实现的
以上纯属个人见解,如有问题请联系本人!
更多推荐
所有评论(0)