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

淩亂°似流年 2022-04-12 03:55 539阅读 0赞

# 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][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][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下载的代码已是完整可以运行的，如果需要修改前端按照下述： ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70]

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][http_localhost_8080_webapp1]

1)测试接口

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

3)利用axios调另一个后台服务接口  
**结果：可以跨域调用不同web 的接口**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70 1]  
4)预检请求  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70 2]  
5)跨域及cookie跨域  
**同一个web下：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70 3]

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

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

访问：[http://localhost:8081][http_localhost_8081]

1)测试正常代理接口

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

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

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

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

**结果：前端调试时可以实现跨域接口调用**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70 5]  
4)跨域及cookie跨域  
**结果：前端调试时可以实现cookie跨域**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70 7]

[https_github.com_2010yhh_springBoot-demos_tree_master_springboot-cros]: https://github.com/2010yhh/springBoot-demos/tree/master/springboot-cros
[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]: http://xn--www-c88dn62bcjd2y5g.jb51.net/test/test.aspx%EF%BC%8C%E9%82%A3%E4%B9%88domain%E9%BB%98%E8%AE%A4%E4%B8%BAwww.jb51.net%E3%80%82%E8%80%8C%E8%B7%A8%E5%9F%9F%E8%AE%BF%E9%97%AE%EF%BC%8C%E5%A6%82%E5%9F%9FA%E4%B8%BAt1.test.com%EF%BC%8C%E5%9F%9FB%E4%B8%BAt2.test.com%EF%BC%8C%E9%82%A3%E4%B9%88%E5%9C%A8%E5%9F%9FA%E7%94%9F%E4%BA%A7%E4%B8%80%E4%B8%AA%E4%BB%A4%E5%9F%9FA%E5%92%8C%E5%9F%9FB%E9%83%BD%E8%83%BD%E8%AE%BF%E9%97%AE%E7%9A%84cookie%E5%B0%B1%E8%A6%81%E5%B0%86%E8%AF%A5cookie%E7%9A%84domain%E8%AE%BE%E7%BD%AE%E4%B8%BA.test.com
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70]: /images/20220412/fd415a2f1cc341b5bad492c6f8e7def7.png
[http_localhost_8080_webapp1]: http://localhost:8080/webapp1
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70 1]: /images/20220412/b617085fdd134645b45cb19df3b56bc2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70 2]: /images/20220412/babe357682684a88a0b92dd9b8bbebdd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70 3]: /images/20220412/d2171cf15a79414e91b9b32e4fdf37df.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70 4]: /images/20220412/6c97790876e34382bcffaab5246e2d19.png
[http_localhost_8081]: http://localhost:8081
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70 5]: /images/20220412/623a1cff099946498dbe23187c086592.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70 6]: /images/20220412/88a49d8fc1b5480e9ee5ace353cfe235.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70 7]: /images/20220412/0eafd66549bb45328175e5da63084269.png