springboot-整合Vue，跨域，cookie跨域，session共享demo

文章目录

springboot-整合Vue，跨域，cookie跨域，session共享demo

问题及概念：

1.跨域

1.1后台设置
1.2cookie跨域设置
1.3session共享

2.测试

2.1下载的代码已是完整可以运行的，如果需要修改前端按照下述：
2.2生产部署：跨域及cookie跨域
2.3前端调试：跨域及cookie跨域

完整代码下载链接：

https://github.com/2010yhh/springBoot-demos/tree/master/springboot-cros

环境

idea2018，jdk1.8，

springboot版本：springboot1.5.9.RELEASE

问题及概念：

网上对跨域请求、cookie跨域、session共享及其前后端设置讲解的很多，但是感觉有点乱，这里自己总结并测试下。

1.跨域请求:

由于浏览器的安全性限制，不允许AJAX访问协议不同、域名不同、端口号不同的数据接口

2.cookie跨域

domain表示的是cookie所在的域，默认为请求的地址，如网址为www.jb51.net/test/test.aspx，那么domain默认为www.jb51.net。而跨域访问，如域A为t1.test.com，域B为t2.test.com，那么在域A生产一个令域A和域B都能访问的cookie就要将该cookie的domain设置为.test.com

3.不同服务器session共享：

默认情况下，各个服务器会分别对同一个客户端产生一个sessionID,可利用客户端cookie存储(此种情况并不一定共享sessionId)、文件、数据库、redis等存储来达到共享session内容

1.跨域

1.1后台设置

可以利用过滤器或者拦截器进行设置

  //通过在响应 header 中设置 ‘*’ 来允许来自所有域的跨域请求访问。
            res.setHeader("Access-Control-Allow-Origin", originHeader);
           //通过对 Credentials 参数的设置，就可以保持跨域 Ajax 时的 Cookie
            //设置了Allow-Credentials，Allow-Origin就不能为*,需要指明具体的url域
            res.setHeader("Access-Control-Allow-Credentials", "true");
            //请求方式
            res.setHeader("Access-Control-Allow-Methods", "*");
            //（预检请求）的返回结果（即 Access-Control-Allow-Methods 和Access-Control-Allow-Headers 提供的信息） 可以被缓存多久
            res.setHeader("Access-Control-Max-Age", "86400");
            //首部字段用于预检请求的响应。其指明了实际请求中允许携带的首部字段
            //res.setHeader("Access-Control-Allow-Headers", "*");
            res.setHeader("Access-Control-Allow-Headers", "Timestamp,Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token,Access-Control-Allow-Headers");

1.2cookie跨域设置

vue前端设置axios：
axios.defaults.withCredentials = true// 允许携带cookie信息
可以利用过滤器或者拦截器进行设置，后台服务代码设置：
  //设置了Allow-Credentials，Allow-Origin就不能为*,需要指明具体的url域
   res.setHeader("Access-Control-Allow-Credentials", "true");

1.3session共享

可以利用cookie、文件、数据库、redis等存储登录信息、用户信息等来达到不同服务启或者不同web共享信息的目的。（注意如果采用cookie来实现，cookie存储内容一般要加密处理）

//设置了cookie跨域后，把共享内容写入到cookie中，实现session共享

@RequestMapping(value = "/setSession", method ={RequestMethod.POST,RequestMethod.GET} )
	@ResponseBody
	public Object  setSession(HttpSession session, HttpServletRequest request, HttpServletResponse response, @RequestParam("key") String key
			, @RequestParam("value") String value) {
		Map<String, Object> result = new HashMap<>();
		request.getSession().setAttribute(key, value);
		result.put("setSession-session_id", session.getId());
		result.put("session_key", key);
		result.put("session_value", value);
		CookieUtils.writeCookie(response,key,value);
		return ResultUtil.success(result);
	}

2.测试

2.1下载的代码已是完整可以运行的，如果需要修改前端按照下述：

在这里插入图片描述

1）修改完前端后，前端打包：

下载代码后，进入web目录：

npm install

npm rub build (安装后根据提示缺少什么，就安装什么)

2）后台启动：设置不同的上下问和端口来测试不同的web跨域

这里以：

server.port=8080
server.context-path=/webapp1

server.port=8090
server.context-path=/webapp2

2.2生产部署：跨域及cookie跨域

访问：http://localhost:8080/webapp1

1)测试接口

2)利用axios直接调后台接口（此时和前端调试时，url不同，前端调试时是代理转发）

3)利用axios调另一个后台服务接口
结果：可以跨域调用不同web 的接口
在这里插入图片描述
4)预检请求

5)跨域及cookie跨域
同一个web下：

**不同web下跨域结果：**通过cookie跨域可以共享session内容，注意sessionId不同。
在这里插入图片描述

2.3前端调试：跨域及cookie跨域

访问：http://localhost:8081

1)测试正常代理接口

2)利用axios直接调后台接口，如下形式

httpaxios
        .get('http://localhost:8080/webapp1/test', {
          params: {}
        })

3)利用axios调另一个后台服务接口

httpaxios
        .get('http://localhost:8090/webapp2/test', {
          params: {}
        })

结果：前端调试时可以实现跨域接口调用
在这里插入图片描述
4)跨域及cookie跨域
结果：前端调试时可以实现cookie跨域