vue-element-admin

登录成功 但发生请求但 Shiro 判断为未登录

前端使用vue-element-admin

后端采用spring shiro jwt

前端登录成功返回token，但当通过shiro的权限判断时，

被factoryBean.setLoginUrl(“/Service/unlogin”); 重定向到未登录。

页面跳转时应该请求头带上 cookie

vue-element-admin 默认不发送cookie

找到request.js并

启动 withCredentials: true 即可

1
2
3
4
5
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

响应中的“Access Control Allow origin”头的值不能是通配符“*”

vue报错信息之跨域当请求的凭据模式为“include”时，响应中的“Access Control Allow origin”头的值不能是通配符“*”

CORS策略已阻止从源位置“http://localhost:3000/api/index/getNotice”访问XMLHttpRequest:http://localhost:8080”：当请求的凭据模式为“include”时，响应中的“Access Control Allow origin”头的值不能是通配符“*”。XMLHttpRequest启动的请求的凭据模式由withCredentials属性控制。

这样的结果可能是你在前端开启了withCredentials影响的，这时后台要添加

1
2
response.setHeader("Access-Control-Allow-Origin","Origin地址 如 http://localhost:9528");
response.setHeader("Access-Control-Allow-Credentials","true");

Added non-passive event listener to a scroll-blocking ‘mousewheel’ event.告警

原因：

详解：https://www.cnblogs.com/PopularProdigal/p/8005783.html
Chrome51 版本以后，Chrome 增加了新的事件捕获机制－Passive Event Listeners。
Passive Event Listeners：就是告诉前页面内的事件监听器内部是否会调用preventDefault函数来阻止事件的默认行为，以便浏览器根据这个信息更好地做出决策来优化页面性能。当属性passive的值为true的时候，代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为，Chrome浏览器称这类型的监听器为被动（passive）监听器。目前Chrome主要利用该特性来优化页面的滑动性能，所以Passive Event Listeners特性当前仅支持mousewheel/touch相关事件。

解决方法：

1
2
1、npm i default-passive-events -S
2、main.js中加入：import 'default-passive-events'

https://blog.csdn.net/u010622874/article/details/104396342

端口跨域方案1 前端解决

vue.config.js中添加代理

1
2
3
4
5
6
7
8
9
10
proxy: {
  [process.env.VUE_APP_BASE_API]: {
    target: 'http://localhost:8082', // 要请求的地址
    ws: true,
    changeOrigin: true,
    pathRewrite: {
      ['^'+process.env.VUE_APP_BASE_API]: ''
    }
  }
}

.env.development中 设置VUE_APP_BASE_API为空

1
VUE_APP_BASE_API = ''

端口跨域2 后端解决

注解

springboot中

添加注解@CrossOrigin

过滤器

WEBMvcConfigurer扩展类中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@Bean
public FilterRegistrationBean filterRegistrationBean() {
    // 对响应头进行CORS授权
    MyCorsRegistration corsRegistration = new MyCorsRegistration("/**");
    corsRegistration.allowedOrigins("*")
            .allowedMethods(HttpMethod.GET.name(), HttpMethod.HEAD.name(), HttpMethod.POST.name(),
                    HttpMethod.PUT.name(), HttpMethod.OPTIONS.name())
            .allowedHeaders("Accept", "Origin", "X-Requested-With", "Content-Type",
                    "Last-Modified", "device", "token")
            .exposedHeaders(HttpHeaders.SET_COOKIE)
            .allowCredentials(true)
            .maxAge(3600);

    // 注册CORS过滤器
    UrlBasedCorsConfigurationSource configurationSource = new UrlBasedCorsConfigurationSource();
    configurationSource.registerCorsConfiguration("/**", corsRegistration.getCorsConfiguration());
    CorsFilter corsFilter = new CorsFilter(configurationSource);
    return new FilterRegistrationBean(corsFilter);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.servlet.config.annotation.CorsRegistration;

/**
 * <p>
 * kuayu
 * </p>
 *
 * @author 等什么柠檬君
 * @since 2020/8/28
 */
public class MyCorsRegistration extends CorsRegistration {



    public MyCorsRegistration(String pathPattern) {
        super(pathPattern);
    }


    @Override
    public CorsConfiguration getCorsConfiguration() {
        return super.getCorsConfiguration();
    }
}

jwt拦截器

1
preHandle中添加
1
2
3
4
5
response.setHeader("Access-Control-Allow-Headers", "*");
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader("Access-Control-Allow-Credentials","true");
response.setCharacterEncoding("UTF-8");
response.setContentType("application/json");