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',//设置你调用的接口域名和端口号 别忘了加httpchangeOrigin: 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拦截器，对任意的请求使用@Beanpublic 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请求打开，重新运行所有项目，这样你会发现，你离成功就不远了！

shiro和axios的跨域问题相关推荐

利用axios解决跨域的问题
利用axios解决跨域的问题参考文章: (1)利用axios解决跨域的问题 (2)https://www.cnblogs.com/Irelia/p/9972990.html 备忘一下.
php 设置跨域axios,vue2.0中proxyTable用axios进行跨域请求的设置方法
vue2.0设置proxyTable使用axios进行跨域请求的方法这里请求的是知乎日报的api,由@izzyleung这位大神提供的,这是github地址. 在vue-cli构建的项目中先安装ax ...
【VUE】vue在vue-cli3环境下基于axios解决跨域问题
[VUE]vue在vue-cli3环境下基于axios解决跨域问题参考文章: (1)[VUE]vue在vue-cli3环境下基于axios解决跨域问题 (2)https://www.cnblogs. ...
vue 使用axios 出现跨域请求的两种解决方法
vue 使用axios 出现跨域请求的两种解决方法参考文章: (1)vue 使用axios 出现跨域请求的两种解决方法 (2)https://www.cnblogs.com/wangshengli5 ...
实现uniapp的app和小程序开发中能使用axios进行跨域网络请求，并支持携带cookie
实现uniapp的app和小程序开发中能使用axios进行跨域网络请求,并支持携带cookie 1-使用npm install axios;命令安装axios 2-新建一个文件夹再建一个.js后缀文件 ...
Springboot整合Shiro前后端分离跨域问题
Springboot整合Shiro前后端分离跨域问题前言:SpringBoot整合shiro进行前后端分离开发时(前端是Vue),项目做了跨域配置,但还是前端请求会出现cros err–显示的跨域问 ...
Axios解决跨域问题
什么是跨域首先需要了解到浏览器的同源策略,同源策略是最核心也是最基本的安全功能,缺少同源策略浏览器的正常功能可能会受到影响.同源策略会阻止一个域的javascript脚本和另外一个域的能容进行交互. ...
axios代理跨域 cli4_跨域本质及解决办法
1.什么是跨域? 2.如何解决? 跨域是前端所独有的,后端不存在跨域问题.是浏览器的一种安全保护手段,为了防止别人抓取.篡改你的网站数据信息.遵循同源策略.同协议(http).同域名.同端口,少一项不 ...
axios代理跨域 cli4_vuecli 3.0之跨域请求代理配置及axios路径配置莫小龙
vue-cli 3.0之跨域请求代理配置及axios路径配置问题:在前后端分离的跨域请求中,报跨域问题配置: vue.config.js: module.exports = { runtimeCo ...

shiro和axios的跨域问题

shiro和xiaos的跨域问题

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

总结一下：

shiro和axios的跨域问题相关推荐

最新文章

热门文章