shiro和axios的跨域问题

shiro和xiaos的跨域问题

首先应该怎么去理解跨域问题，这个原理我就不多说了，大家网上查查就行了。**
注意：这里是基于springboot（后端）和Vue（前端）
这里我将分两部分来说：

一.多种解决跨域的方法
二.shiro遇上axios跨域报错解决方法

一.解决跨域方法：
后端：
1.在后端控制层加@CrossOrigin

此方法拿来做测试非常方便快捷：

然后你就可以在前端直接访问后端url了。

2.前端Vue项目里加一个vue.config.js文件

代码：

module.exports = {
    configureWebpack: {
        devServer: {
            proxy: {
                //名字可以自定义，这里我用的是app
                '/app': {
                    target: 'http://localhost:8085',//设置你调用的接口域名和端口号 别忘了加http
                    changeOrigin: true,//这里设置是否跨域
                    pathRewrite: {
                        /* 重写路径，当我们在浏览器中看到请求的地址为：http://localhost:8080/api/core/getData/userInfo 时
                          实际上访问的地址是：http://121.121.67.254:8185/core/getData/userInfo,因为重写了 /api
                         */
                        '^/app': ''
                    }
                }
            }
        }
    }
}

// An highlighted block
var foo = 'bar';

这样你就可以跨域了。
3.后端写跨域文件CorsConfig.java

代码：

//package ***  这个是你自己的包;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.context.annotation.Bean;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig(){
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedHeader("*"); // 允许任何的head头部
        corsConfiguration.addAllowedOrigin("*"); // 允许任何域名使用
        corsConfiguration.addAllowedMethod("*"); // 允许任何的请求方法
        corsConfiguration.setAllowCredentials(true);
        return corsConfiguration;
    }

    // 添加CorsFilter拦截器，对任意的请求使用
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }

}

目前先写这几种吧，其他的个人感觉没有那么方便了那就下次再写，有兴趣可以去看看别人写的。

二.好了好了，现在说一说axios的巨坑

打起精神来了哦：
问题一：
相信学过shiro的朋友都知道，shiro的自定义Realm类里，有授权，认证两个函数，认证（就是第二个红框）不是大问题，我现在说说第一个红框的授权函数，很多朋友发现自己前后端交互时认证明明没有毛病，但是授权却出现问题了——它不被调用，debug发现它根本就没被用过！

问题二：
明明代码没错，但是匿名和认证访问就是没用，前端一直报跨域问题，但是我们把shiro去掉发现跨域没错啊！

方法来了：
这里建议大家先用postman做测试，我就是这种情况，postman访问后端没问题，但是我的Vue程序用axios去访问就出现跨域报错了！
这种情况的话，原因是axios发送请求中没有Cookie（这是最要命的一点），这根本不是跨域拦截，而是shiro把你拦了！

因为axios是默认关闭Cookie，所以我们要去main.js让axios打开Cookie，
代码：

axios.defaults.withCredentials = true

然后重新运行项目，发现成功了！
当然如果你是想要快速测试并且不全局改变axios请求那你可以这样：

设置 withCredentials的值为true，这样也行。

总结一下：

如果你的项目去了shiro跨域没有问题情况下，加上shiro（自身shiro权限代码没错，推荐这时候把权限都设为可以匿名访问，比如： filterChainDefinitionMap.put("/Station/**", “anon”);）此时还出现就出现跨域问题的话，明白这是shiro把你拦了下来而不是跨域错误。这时应该去前端项目里把axios的Cookie请求打开，重新运行所有项目，这样你会发现，你离成功就不远了！