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跨域