spring|spring boot + shiro + vue(axios)采用cookie+session实现前后分离的生产环境跨域配置的笔记


spring boot + shiro + vue(axios)采用cookie+session实现前后分离的生产环境跨域配置的笔记

  • 笔记
      • 1. **web token** 跨域配置
      • 1. **cookie+session** 跨域配置

笔记 采用cookie+session实现前后分离和使用web token的区别(前端异步采用axios)
1. web token 跨域配置
web token 这个前后端配置比较简单,后端只需要配置Origin为*,header为*就可以了
前端不需要怎么配置,头信息要传的什么就配置什么,如你需要传token可以设置
{ headers: { 'X-Authorization': 'token值' } }

然后后端获取头信息进行权限校验即可
//后端配置 import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.UrlBasedCorsConfigurationSource; import org.springframework.web.filter.CorsFilter; /** * 跨域请求设置 过滤器 * */ public class CustomCorsFilter extends CorsFilter {public CustomCorsFilter() { super(configurationSource()); }private static UrlBasedCorsConfigurationSource configurationSource() { CorsConfiguration config = new CorsConfiguration(); config.setAllowCredentials(true); config.addAllowedOrigin("*"); config.addAllowedHeader("*"); config.setMaxAge(36000L); config.setAllowedMethods(Arrays.asList("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")); UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/api/**", config); return source; } }

1. cookie+session 跨域配置
由于axios默认是不开启cookie功能的,而且开启cookie功能后,Origin是不允许配置为通配符*的(这个是最大的坑),首先前端配置区别就在于创建axios请求对象时传入启用cookie功能或是全局启用cookie功能。
每个请求启用cookie:
axios.get(url,{withCredentials: true})

全局配置
axios.defaults.withCredentials = true

【spring|spring boot + shiro + vue(axios)采用cookie+session实现前后分离的生产环境跨域配置的笔记】后端配置Origin不能用通配符*,因为axios开启cookie后,跨域保存cookie时要指定域的,如下:
package com.cdc.bdom.filter; import java.util.Arrays; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.UrlBasedCorsConfigurationSource; import org.springframework.web.filter.CorsFilter; @Configuration public class PortalCorsFilter extends CorsFilter{ private static Logger logger = LoggerFactory.getLogger(PortalCorsFilter.class); public PortalCorsFilter() { super(configurationSource()); }private static UrlBasedCorsConfigurationSource configurationSource() { logger.info("init CorsFilter..."); CorsConfiguration config = new CorsConfiguration(); config.setAllowCredentials(true); config.addAllowedOrigin("允许跨域访问额地址"); config.addAllowedOrigin("允许跨域访问额地址"); config.addAllowedOrigin("允许跨域访问额地址"); config.addAllowedHeader("*"); config.setMaxAge(36000L); config.setAllowedMethods(Arrays.asList("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")); UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", config); return source; } }

    推荐阅读