zoukankan      html  css  js  c++  java
  • springboot+vue2.x 解决session跨域失效问题

    服务端SpringBoot2.x   :localhost:8082

    前端Vue2.x                 :localhost:81

    前后端的端口号不同,为跨域,导致前端访问后端时,每次访问都新生产一个sessionID。解决如下:

    后端:

    1.添加过滤器:

    package com.nsoft.gkzp.syscore.config.filter;
    
    import org.apache.logging.log4j.LogManager;
    import org.apache.logging.log4j.Logger;
    import org.springframework.web.bind.annotation.RequestMethod;
    
    import javax.servlet.*;
    import javax.servlet.annotation.WebFilter;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    
    @Configuration //内置tomcat运行不加它没问题,但后来改为用外置tomcat时,启动后过滤器会失效,后来查明原因需要加上@Configuration才行 @WebFilter(urlPatterns
    = "/*", filterName = "corsFilter") public class CorsFilter implements Filter { final private static Logger logger = LogManager.getLogger(CorsFilter.class); @Override public void destroy() { } /** * 此过滤器只是处理跨域问题 * @param servletRequest * @param servletResponse * @param chain * @throws ServletException * @throws IOException */ @Override public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain chain) throws ServletException, IOException { HttpServletRequest request = (HttpServletRequest) servletRequest; HttpServletResponse response = (HttpServletResponse) servletResponse; String origin = request.getHeader("Origin"); if(origin == null) { origin = request.getHeader("Referer"); } response.setHeader("Access-Control-Allow-Origin", origin);// 允许指定域访问跨域资源(这里不能写*,*代表接受所有域名访问,如写*则下面一行代码无效。谨记) response.setHeader("Access-Control-Allow-Credentials", "true");//true代表允许客户端携带cookie(此时origin值不能为“*”,只能为指定单一域名) response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH"); /// 允许浏览器在预检请求成功之后发送的实际请求方法名 response.setHeader("Access-Control-Allow-Headers", "Authorization,Origin, X-Requested-With, Content-Type, Accept,Access-Token");// 允许浏览器发送的请求消息头 //response.setHeader("Access-Control-Max-Age", "86400"); // 浏览器缓存预检请求结果时间,单位:秒 chain.doFilter(request,response); } @Override public void init(FilterConfig filterConfig) throws ServletException { } }

    2. springboot2.配置过滤器时,启动类必须加上@ServletComponentScan才会加载过滤器

    package com.nsoft.gkzp;
    
    import org.mybatis.spring.annotation.MapperScan;
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    import org.springframework.boot.web.server.ConfigurableWebServerFactory;
    import org.springframework.boot.web.server.ErrorPage;
    import org.springframework.boot.web.server.WebServerFactoryCustomizer;
    import org.springframework.boot.web.servlet.ServletComponentScan;
    import org.springframework.context.annotation.Bean;
    import org.springframework.http.HttpStatus;
    import org.springframework.web.servlet.config.annotation.CorsRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
    
    /**
     * springboot入口
     * MapperScan("com.nsoft.gkzp.**.dao")为扫描mapper, 所以dao下面的类就不需要添加@mapper注解了
     * ServletComponentScan  添加了过滤器,故这里要添加@ServletComponentScan注解,spring才会扫描到过滤器(eg:com.nsoft.gkzp.syscore.config.filter.CorsFilter)
     */
    @SpringBootApplication
    @ServletComponentScan
    @MapperScan("com.nsoft.gkzp.**.dao")
    public class GzyGkzpApplication {
    
        public static void main(String[] args) {
            SpringApplication.run(GzyGkzpApplication.class, args);
        }
    
    
        /**
         * 在springboot整合vue前端时,vue使用url跳转时报404错误,此处代码解决此问题
         * 参照https://blog.csdn.net/Mr_EvanChen/article/details/83625082
         */
        @Bean
        public WebServerFactoryCustomizer<ConfigurableWebServerFactory> webServerFactoryCustomizer(){
            return factory -> {
                ErrorPage error404Page = new ErrorPage(HttpStatus.NOT_FOUND, "/index.html");
                factory.addErrorPages(error404Page);
            };
        }
    
    }

    3. spring-session 2.x 中 Cookie里面了SameSite ,他默认值是 Lax 

    SameSite Cookie 是用来防止CSRF攻击,它有两个值:Strict、Lax
    SameSite = Strict:意为严格模式,表明这个cookie在任何情况下都不可能作为第三方cookie;
    SameSite = Lax  :意为宽松模式,在get请求是可以作为第三方cookie,但是不能携带cookie进行跨域post访问(这就很蛋疼了,我们那个校验接口就是POST请求)

    package com.nsoft.gkzp.syscore.config;
    
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.session.web.http.CookieSerializer;
    import org.springframework.session.web.http.DefaultCookieSerializer;
    
    
    /**
    * https://www.cnblogs.com/hujinshui/p/11025848.html
    * spring-session 2.x 中 Cookie里面引入了SameSite他默认值是 Lax,
    * SameSite Cookie 是用来防止CSRF攻击,它有两个值:Strict、Lax
    * SameSite = Strict:意为严格模式,表明这个cookie在任何情况下都不可能作为第三方cookie;
    * SameSite = Lax:意为宽松模式,在get请求是可以作为第三方cookie,但是不能携带cookie进行跨域post访问
    * 总结:前端请求到后台,每次session都不一样,每次都是新的会话,导致获取不到用户信息
    */
    @Configuration public class SpringSessionConfig {
    public SpringSessionConfig() { }
    @Bean
    public CookieSerializer httpSessionIdResolver() {
      DefaultCookieSerializer cookieSerializer
    = new DefaultCookieSerializer(); // 取消仅限同一站点设置
      cookieSerializer.setSameSite(null); return cookieSerializer;
      }
    }

    前端:

    1.在 main.js (前端用axios)

    import axios from 'axios';
    axios.defaults.withCredentials=true;//让ajax携带cookie

    用了1天半时间,改了很多次依然不行,后来发现是前端用了 proxy 代理,它本身也是已经处理了跨域问题,网上找的时候发现有的文章也用到这个了。但我这里就是不行。

    我原来的代码:

    1)写的注册页面:

     2)全局配置如下:

    main.js

    // xenv 标记当前环境 true:开发环境   false:生产环境
    const xenv = true;
    // 注册全局变量
    Vue.prototype.$global = {
       //contentPath 标记根路径,主要用于axios请求后端数据的url
       contentPath: xenv ? '/api/' : router.options.base  
    };

    (xenv设为true;所以 根路径contentPath的值必为‘/api/’   ,而‘/api/’ 在vue.config.js里配置为代理,如下。)

    vue.config.js

      devServer: {
        open: true,
        host: '0.0.0.0',
        port: 80,
        https: false,
        hotOnly: false,
        before: app => {
        },
        proxy: {
          // 配置跨域
          '/api': {
            target: 'http://127.0.0.1:8082/',
            ws: true,
            changOrigin: true,
            pathRewrite: {
              '^/api': '/'
            }
          }
        }
      },

    2.不使用proxy代理,把根目录写死为'http://127.0.0.1:8082/',就成功了,修改如下:

    main.js:

    // xenv 标记当前环境 true:开发环境   false:生产环境
    const xenv = true;
    // 注册全局变量
    Vue.prototype.$global = {
      // contentPath 标记根路径,主要用于axios请求后端数据的url
      // contentPath: xenv ? '/api/' : router.options.base
      contentPath:  'http://127.0.0.1:8082/'
    };

    4. 跨域白名单

    (为了安全起见,可在服务端设置可跨域访问的白名单地址)

    1. 自定义了一个配置文件 D:workspace-gzy-gkzpsrcmain esources esourcesconfig.properties (这里对于localhost,127.0.0.1两个ip,不要放到正式环境。否则如对方用本地环境,去访问正式的后台,会被允许跨域访问,不安全)

    #允许CORS的IP(即可跨域访问白名单,添加多个用英文逗号隔开coreFile.java)((端口号固定为application.properties配置的server.port))
    system.accessControlAllowOrigin =192.168.1.61,zshj.com.cn
    #测试环境加上localhost,127.0.0.1   system.accessControlAllowOrigin =localhost,127.0.0.1,,zshj.com.cn

    2.读取配置文件类 D:workspace-gzy-gkzpsrcmainjavacom softgkzpsyscoreconfigMyDefinedUtil.java

    package com.nsoft.gkzp.syscore.config;
    import org.springframework.beans.factory.annotation.Value;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.context.annotation.PropertySource;
    
    /**
     * 自定义配置类 获取config.properties相关参数
     *( 其他类获取值,请用注解@Autowired 方式 ,否则获取不到值)
     * @author zdyang
     * @date 2019.08.30
     */
    @Configuration //标识这个是一个配置类
    @PropertySource(value = "classpath:resources/config.properties")
    public class MyDefinedUtil {
        @Value("${system.encoding:UTF-8}")  //冒号后的值为没有配置文件时,制动装载的默认值  //下面的属性不能为static类型,否则获取不到值
        public  String SYSTEM_ENCODING;  //#System Encoding
    
        //文件管理
        @Value("${system.file.folder.img}")
        public  String SYSTEM_FILE_FOLDER_IMG;
    
        //允许跨域白名单
        @Value("${system.accessControlAllowOrigin}")
        public  String SYSTEM_ACCESSCONTROLALLOWORIGIN;
    }

    3.跨域配置类:D:workspace-gzy-gkzpsrcmainjavacom softgkzpsyscoreconfigfilterCorsFilter.java

    package com.nsoft.gkzp.syscore.config.filter;
    
    import com.nsoft.gkzp.syscore.config.MyDefinedUtil;
    import org.apache.logging.log4j.LogManager;
    import org.apache.logging.log4j.Logger;
    import org.springframework.beans.factory.annotation.Autowired;
    
    
    import javax.servlet.*;
    import javax.servlet.annotation.WebFilter;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    
    @Configuration //内置tomcat运行不加它没问题,但后来改为用外置tomcat时,启动后过滤器会失效,后来查明原因需要加上@Configuration才行 @WebFilter(urlPatterns
    = "/*", filterName = "corsFilter") public class CorsFilter implements Filter { final private static Logger logger = LogManager.getLogger(CorsFilter.class); @Autowired MyDefinedUtil myDefinedUtil; @Override public void destroy() { } /** * 此过滤器只是处理跨域问题 * @param servletRequest * @param servletResponse * @param chain * @throws ServletException * @throws IOException */ @Override public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain chain) throws ServletException, IOException { HttpServletRequest request = (HttpServletRequest) servletRequest; HttpServletResponse response = (HttpServletResponse) servletResponse; String origin = request.getHeader("Origin"); if(origin == null) { origin = request.getHeader("Referer"); } //允许跨域白名单 String whiteList=myDefinedUtil.SYSTEM_ACCESSCONTROLALLOWORIGIN; boolean isValid = false; String adressIP = null;//截取地址栏的ip地址 if(origin != null){ try { adressIP = origin.substring(origin.indexOf("://") + 3); int b = adressIP.indexOf(":");//有端口号情况 eg:https://127.0.0.1:8080 if (b > 0) { adressIP = adressIP.substring(0, b); }else{ b = adressIP.indexOf("/");//如果是默认端口号,地址栏不填写端口情况(443 80)eg: https://127.0.0.1 if (b > 0) { adressIP = adressIP.substring(0, b); } } isValid = whiteList.contains(adressIP); //将origin截出ip字符串 }catch (Exception e){ logger.error("白名单校验出错:"+e.getMessage(),e); } } logger.info("跨域验证:origin="+origin+"***adressIP="+adressIP+"***isValid="+isValid);// 如为跨域请求,下面的"Access-Control-Allow-Origin"值置为null,就无法访问了。。。如果为非跨域请求,这个为null不会受影响,依然允许访问 response.setHeader("Access-Control-Allow-Origin", isValid ? origin : "null");// 允许指定域访问跨域资源(这里不能写*,*代表接受所有域名访问,如写*则下面一行代码无效。谨记) response.setHeader("Access-Control-Allow-Credentials", "true");//true代表允许客户端携带cookie(此时origin值不能为“*”,只能为指定单一域名) response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH"); /// 允许浏览器在预检请求成功之后发送的实际请求方法名 response.setHeader("Access-Control-Allow-Headers", "Authorization,Origin, X-Requested-With, Content-Type, Accept,Access-Token");// 允许浏览器发送的请求消息头 //response.setHeader("Access-Control-Max-Age", "86400"); // 浏览器缓存预检请求结果时间,单位:秒 //logger.info("****************测试过滤器及日志1111"); chain.doFilter(request,response); //logger.error("****************测试过滤器及日志2222"); } @Override public void init(FilterConfig filterConfig) throws ServletException { } }

    白名单心路历程如下:

    首先参考 https://blog.csdn.net/qq_15054679/article/details/90684703 :

     config.properties 

    #允许CORS的IP(即可跨域访问白名单,添加多个用英文逗号隔开)(本地连接在CorsFilter.java中已设置,就不在这里配置了) 
    system.accessControlAllowOrigin =http://localhost:8082

    CorsFilter.java

    package com.nsoft.gkzp.syscore.config.filter;
    
    import com.nsoft.gkzp.syscore.config.MyDefinedUtil;
    import org.apache.logging.log4j.LogManager;
    import org.apache.logging.log4j.Logger;
    import org.springframework.beans.factory.annotation.Autowired;
    
    import javax.servlet.*;
    import javax.servlet.annotation.WebFilter;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    
    @Configuration //内置tomcat运行不加它没问题,但后来改为用外置tomcat时,启动后过滤器会失效,后来查明原因需要加上@Configuration才行 @WebFilter(urlPatterns
    = "/*", filterName = "corsFilter") public class CorsFilter implements Filter { final private static Logger logger = LogManager.getLogger(CorsFilter.class); @Autowired MyDefinedUtil myDefinedUtil; @Override public void destroy() { } /** * 此过滤器只是处理跨域问题 * @param servletRequest * @param servletResponse * @param chain * @throws ServletException * @throws IOException */ @Override public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain chain) throws ServletException, IOException { HttpServletRequest request = (HttpServletRequest) servletRequest; HttpServletResponse response = (HttpServletResponse) servletResponse; String origin = request.getHeader("Origin"); if(origin == null) { origin = request.getHeader("Referer"); } //允许跨域白名单 String[] whiteList = (myDefinedUtil.SYSTEM_ACCESSCONTROLALLOWORIGIN).split(",") ; boolean isValid = false; logger.info("origin="+origin); for(String ip : whiteList){ if(origin != null && origin.equals(ip)){ isValid = true; break; } } logger.info("isValid="+isValid);//如为跨域请求,下面的"Access-Control-Allow-Origin"值置为null,就无法访问了。。。如果为非跨域请求,这个为null不会受影响,依然允许访问
            response.setHeader("Access-Control-Allow-Origin", isValid ? origin : "null");// 允许指定域访问跨域资源(这里不能写*,*代表接受所有域名访问,如写*则下面一行代码无效。谨记)
            response.setHeader("Access-Control-Allow-Credentials", "true");//true代表允许客户端携带cookie(此时origin值不能为“*”,只能为指定单一域名)
            response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH"); /// 允许浏览器在预检请求成功之后发送的实际请求方法名
            response.setHeader("Access-Control-Allow-Headers", "Authorization,Origin, X-Requested-With, Content-Type, Accept,Access-Token");// 允许浏览器发送的请求消息头
            //response.setHeader("Access-Control-Max-Age", "86400");            // 浏览器缓存预检请求结果时间,单位:秒
    
            chain.doFilter(request,response);
        }
        @Override
        public void init(FilterConfig filterConfig) throws ServletException {
        }
    
    
    }

    上面代码用  origin.equals(ip) 去判定不是很好。

    原因是测试时发现,

    1)origin如果是域名的话(值为http://zhxy.nsoft.com.cn:8082),如果是ip地址的话会有斜杠(值为:http://120.24.253.6:8082/)。这样在config.properties配置文件配置白名单参数system.accessControlAllowOrigin时会有很多,其很麻烦

    2)我把http协议改为https协议时:端口号变了,http也改成https,参数system.accessControlAllowOrigin改的时候也很麻烦。

    参照:

    https://www.cnblogs.com/zimublog/p/10786110.html

    https://blog.csdn.net/qq_17555933/article/details/92017890

  • 相关阅读:
    设置MySQL的字符编码
    数据库面试题
    java.lang.IncompatibleClassChangeError: Implementing class
    下载SpringJar包
    使用命令wsimport构建WebService客户端
    java读取.properties配置文件的几种方法
    ELK5.X使用X-Pack配置密码
    Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock'
    MySQL常用命令
    XPath常用定位节点元素语句总结
  • 原文地址:https://www.cnblogs.com/zdyang/p/11636697.html
Copyright © 2011-2022 走看看