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