vue-cli+spring boot前后端分离跨域及session丢失解决办法

2023-05-16

前后端分离跨域笔记

  • 小小的唠叨
    • 前端代码
    • 后端

小小的唠叨

曾几何时,项目开发时间很紧,项目组很多的人即不懂vue也不大懂spring boot及mybatic的强大之处,也没有做过前后端分离,项目虽然可以按期完成了,但感觉代码很乱,于是又曾几何时,突然心血来潮,写了一个代码生成神器,希望可以免去一些重复性的工作。然后遇到了一个很棘手的跨域问题,故有此一记。

前端代码

axios设置如下图
在这里插入图片描述
将withCredentials设置为true。

后端

1.application.yml文件里配置如下图

在这里插入图片描述
配置CORS的地址accessControlAllowOrigin: http://localhost:8080,http://localhost:9191

2.使用application.yml的值Constants类如下图

在这里插入图片描述
增加accessControlAllowOrigin变量

3.HandlerInterceptor拦截器配置如下图

在这里插入图片描述

//*表示允许所有域名跨域
		String[] whiteList = constants.getAccessControlAllowOrigin().split(",");
    	String myOrigin = request.getHeader("origin");
    	boolean isValid = false;
    	for( String ip : whiteList ) {
    		if( myOrigin != null && myOrigin.equals(ip) ){
    			isValid = true;
    			break;
    		}
    	}
    	response.setHeader("Access-Control-Allow-Origin", isValid ? myOrigin : "null");
		//response.addHeader("Access-Control-Allow-Origin", "http://localhost:8080");
		response.addHeader("Access-Control-Allow-Headers",
	            "Origin, X-Requested-With, Content-Type, Accept, Authorization");//服务器支持的所有头信息字段
	    //允许跨域的Http方法
		response.addHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE");
		response.addHeader("Access-Control-Max-Age", "5");//请求的有效期,单位为秒
		response.addHeader("Access-Control-Allow-Credentials","true");//是否可传递信息
		response.addHeader("XDomainRequestAllowed","1");

4.WebMvcConfigurer

package cn.com.css.interceptor;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * @ClassName: WebMvcConfig
 * @Description:系统拦截配置
 * @author: 兰建青
 * @date: 2019年5月11日 下午2:02:48
 * 
 * @Copyright: 2019 中国软件
 */
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

	@Bean
	SessionInterceptor sessionInterceptor() {
		return new SessionInterceptor();
	}

	@Override
	public void addInterceptors(InterceptorRegistry registry) {
		// 可添加多个
		registry.addInterceptor(sessionInterceptor())
				.addPathPatterns("/**")
				.excludePathPatterns("/user/login")// 登录放行
				.excludePathPatterns("/user/getVerify")// 获取验证码放行
				.excludePathPatterns("/user/checkVerify")// 校验验证码放行
				.excludePathPatterns("/user/logout")// 退出放行
				.excludePathPatterns("/user/registe")// 注册放行
				.excludePathPatterns("/user/test").excludePathPatterns("/user/chackAccount")// 校验正好是否已经存在放行
				.excludePathPatterns("/static/**");// 静态文件放行
	}

	/**
	 * <p>
	 * Title: addResourceHandlers
	 * </p>
	 * <p>
	 * Description: 添加静态资源文件,外部可以直接访问地址
	 * </p>
	 * 
	 * @param registry
	 * @see org.springframework.web.servlet.config.annotation.WebMvcConfigurer#addResourceHandlers(org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry)
	 */
	@Override
	public void addResourceHandlers(ResourceHandlerRegistry registry) {
		// 需要配置1:----------- 需要告知系统,这是要被当成静态文件的!
		// 第一个方法设置访问路径前缀,第二个方法设置资源路径
		registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
	}
	
	/**
	 * <p>Title: addCorsMappings</p>   
	 * <p>Description: 跨域解决</p>   
	 * @param registry   
	 * @see org.springframework.web.servlet.config.annotation.WebMvcConfigurer#addCorsMappings(org.springframework.web.servlet.config.annotation.CorsRegistry)
	 */
	@Override
	public void addCorsMappings(CorsRegistry registry) {
		// 设置允许跨域的路径
		registry.addMapping("/**")
				// 设置允许跨域请求的域名
				.allowedOrigins("*")
				// 是否允许证书 不再默认开启
				.allowCredentials(true)
				// 设置允许的方法
				.allowedMethods("*")
				// 跨域允许时间
				.maxAge(3600);
	}
}

总结

1.前端的axios的withCredentials设置为true
2.请查看阮大师的《跨域资源共享 CORS 详解》

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue-cli+spring boot前后端分离跨域及session丢失解决办法 的相关文章

  • makefile和git的使用总结

    makefile主要用在一个项目中有多个C文件 xff0c 源文件分为不同类型 功能和模块 makefile定义了一系列的规则来指定哪一个文件先编译 xff0c 那个后编译等操作 Linux环境下使用makefile可以统一管理方便快捷 x
  • 高通挂载bp侧驱动bringup流程

    BP侧修改 1 添加供应商给的驱动 添加到vendor qcom non hlos ADSP VT 5 4 3 c1 adsp proc ssc drivers 2 添加编译 vendor qcom non hlos ADSP VT 5 4
  • Jetson Nano从零开始(2):硬件篇

    Jetson Nano从零开始 xff08 2 xff09 xff1a 硬件篇 摘要主要硬件 xff1a 步骤1 烧写系统镜像到TF卡2 开机 其他硬件信息电源供电方式连接树莓派相机的方式 其它硬件参考文章 xff1a 摘要 这一篇主要讲n
  • 使用RGBD相机实现YOLOv3目标识别并测距,获取物体三维坐标

    设备环境 xff1a Ubuntu18 04 43 ros melodic 相机 xff1a 乐视相机 xff08 乐视遗产 xff0c 和奥比中光的 Astra Pro 同方案 xff0c 便宜 xff09 1 首先要安装一部分依赖 su
  • [jetson浅试] yolov5+deepsort+Tensorrt C++部署(Xavier AGX)

    1 简介 xff1a 这学期刚开学的时候搞的 xff0c 空下来整理一些 xff08 以后还是应该养成边搞边写博客的好习惯 xff09 本文主要是对yolov5 deepsort tensorrt A c 43 43 implementat
  • 阿里2014年校园题目最后一题答案及证明

    该题目来自cdsn的一位网友 xff08 可见http blog csdn net thebestdavid article details 11975809 xff09 xff0c 具体内容如下 xff1a 在黑板上写下50个数字 xff
  • 编程——两种list的翻转方法

    对于题目相信大家都比较熟悉了 xff0c 下面就直接上代码了 xff0c 其中没有给出list的creat函数 xff0c 有兴趣的同学可以自己实现 1 模板node的定义 template lt class T gt class TNod
  • 数组旋转新方法

    题目 xff1a 对一个int数组进行左右任意长度的旋转 xff0c 如 xff1a 原始数组为 1 2 3 4 5 xff0c 左旋两位 xff08 可用 2表示 xff09 得 3 4 5 1 2 xff0c 右旋两位 xff08 可用
  • 为什么链表操作过程中对于结构体指针,都要用malloc来开辟内存空间

    sqlist h ifndef SQLIST H define SQLIST H include lt stdio h gt include lt stdlib h gt define maxsize 1024 线性表的最大长度 typed
  • P1706 全排列问题

    原题 P1706 全排列问题 这题显然可以暴力 长达164行 include lt iostream gt include lt istream gt include lt ostream gt include lt cstdio gt i
  • 自动化专业考研方向简介

    自动化专业考研方向简介 xff08 一 xff09 大家在准备考研时 xff0c 想没想过 自己对什么感兴趣 xff1f 自己以后想干什么 xff1f 毕业后如何打算 xff1f 如果你认真考虑了这几个问题 xff0c 相信你的未来研究生生
  • UVA1185 Big Number

    原题 https www luogu com cn problem UVA1185 本题用到的定理的证明 https www cnblogs com weiliuyby p 5831991 html 题目 给出n 求n 的位数 从网上找到了
  • 浅谈威佐夫博弈

    如果不了解威佐夫博弈的话 xff0c 下面有威佐夫博弈的介绍 有两堆石子 xff0c 数量任意 xff0c 可以不同 游戏开始由两个人轮流取石子 游戏规定 xff0c 每次有两种不同的取法 xff0c 一是可以在任意的一堆中取走任意多的石子
  • YBT1325:循环比赛日程表

    我们先看题 我们仔细观察就会发现一下规律 xff1a 设一个数 设两个数 且 1 在的范围内 有 2 在的范围内 有 3 在的范围内 有 以上三条我都验证过了 正确 所以代码就出来了 include lt iostream gt using
  • Codeforces Contest #1553 A : Digit Sum 题解

    题目链接 Digit Sum 题面 将上面一大坨翻译一下 xff0c 就是 xff1a 定义函数的数字和 给出 求有多少个满足且 若模余 xff0c 则成立 一开始想是输出的下取整 xff0c 最后的结果 xff1a 没有考虑到的情况 xf
  • Atcoder Beginner Contest 100 - 题解

    A 原题 Happy Birthday 本题其实很水 只需要输入这两个整数 xff0c 如果中有一个大于 就输出 xff0c 否则输出 Yay include lt bits stdc 43 43 h gt using namespace
  • ubuntu 18.04 server 扩容(LVM)磁盘 解决磁盘不足的情况 (亲测)

    因为发现我的本地server出现磁盘满了的情况 所以进行lvm的扩容 截图的都是扩容后的 所以忽略容量 1 查看磁盘情况 df span class hljs attribute h span 原本发现 dev mapper ubuntu
  • 欢迎使用CSDN-markdown编辑器

    欢迎使用Markdown编辑器写博客 本Markdown编辑器使用StackEdit修改而来 xff0c 用它写博客 xff0c 将会带来全新的体验哦 xff1a Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传
  • 工作一年,辞职复习半年,考杭电计算机的经验分享

    工作一年 xff0c 辞职复习半年 xff0c 考杭电计算机的经验分享 如果 xff0c 毕业了工作顺利的人大概率是不会去考研的 xff0c 去考研的人 xff0c 大概率是想改变的 题记 2019 4 6 关于我 纠结的人生 为什么考研
  • CSS表格样式

    文章目录 CSS表格样式caption side 标题位置border collapse 边框合并border spacing 边框间距css样式 xff08 推荐使用 xff09 CSS表格样式 caption side 标题位置 语法

随机推荐