前後端分離 跨域 sessionid保持一致
阿新 • • 發佈：2019-02-06
1.前端開發使用的VUE，後端使用的java，前後端分離，解決方法如下：
前端要將withCredentials設為true
以ajax請求為例：
[javascript] view plain copy- $.ajax({
- url: a_cross_domain_url,
- // 將XHR物件的withCredentials設為true
- xhrFields: {
- withCredentials: true
- }
- });
vue設定：
後端設定，以java為例，其他語言類似：
- httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
- httpResponse.setHeader("Access-Control-Allow-Origin", "http://192.168.199.240:8081");
- httpResponse.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
Access-Control-Allow-Credentials 設為true的話，Access-Control-Allow-Origin就不能設為*了，只好改成具體的域了，這樣就可以多次請求取到的sessionid就一致了。
前端開發使用的jquery，後端使用的java，前後端分離，解決方法如下：
- <!DOCTYPE html>
- <html>
- <head>
- <metacharset="utf-8"/>
- <title></title>
- <scripttype="text/javascript"src="js/jquery-1.9.0.js"></script>
- <scripttype="text/JavaScript">
- function denglu(){
- alert("進入單擊事件");
- var username=document.getElementById("adminUser").value;
- alert("username:"+username);
- var pass=document.getElementById("passWord").value;
- alert("password:"+pass);
- $.ajax({
- contentType:'application/json',
- xhrFields: {
- withCredentials: true
- },
- type:"post",
- data: JSON.stringify({
- adminUser:username,
- passWord:pass
- }),
- url:"http://localhost/api/admin/login/loginAdmin",
- success: function(data){
- alert(data);
- alert("成功");
- //window.location.href = 'main.html';
- }
- });
- }
- function huoqu(){
- alert("進入單擊事件");
- $.ajax({
- xhrFields: {
- withCredentials: true
- },
- type:"get",
- date:{},
- url:"http://localhost/api/admin/login/getSessionAdmin",
- success: function(data){
- alert(data);
- alert("成功");
- }
- });
- }
- </script>
- </head>
- <body>
- 使用者名稱：<inputtype="text"id="adminUser"name="adminUser"/><br/>
- 密碼：<inputtype="text"id="passWord"name="passWord"/><br/>
- <inputtype="button"id="tj"value="登入"onclick="denglu();"/>
- <inputtype="button"onclick="huoqu();"value="查詢當前seesion中的管理員"/>
- </body>
- </html>
主要在於get、post提交時引數的問題
get提交
post提交
