1.前言
前后台分離式開發,后端提供訪問接口,前端使用ajax拉取數據,使用vue綁定數據,各司其職開發更高效,架構高內聚低耦合,擴展維護邏輯更簡單,團隊協作程度更高.
相比於以前后端的兄弟處理完后台業務,寫完后台接口,還需要拿到前端寫的頁面,使用一些頁面渲染技術,比如el,jstl,freemark等來將后台數據生成html結構再響應給客戶端展示,這種開發模式要苦逼很多,比如html結構太復雜,js操作dom結構太多,后端開發是不可能搞清楚的,這時你就要問前台,我應該怎么改你的結構呀?這里啥意思呀?這里的js是特效還是操作數據了呀?還有就是你可能在修改結構的同時可能會錯亂或者特效丟失的一些情況,然后這樣的話你自己一搬改不了,還要叫前端兄弟,前端兄弟肯定會不耐煩的說:"我給你的時候是好好的,誰知道你怎么改的......" 等等一些頁面問題,這是不是很苦逼,我們可是后端開發,干嘛每天要看着繁雜的html,css,js,熟悉那么多無窮盡的結構,這些頁面問題本來就應該前端兄弟處理,后端開發就不應該考慮. so,前后端分離開應運而生.
當然了,使用任何一種新的技術或者架構,都肯定會多多少少出點問題,然后下面總結了幾點常見問題以及解決方案.
1. 跨域問題
1.1 何為跨域
域.指的是一個范圍,一個可見或可控的范圍.
web開發中,在同一協議,同一主機,同一端口下的項目便是在同一域下.反之有任何一點不同,則都屬於跨域.
我們由於是前后端分離開發,自然要在兩台或兩台以上的電腦開發,端口呢也一般是不相同的,后端如果是java的話大多使用tomcat,端口默認為8080,前端的話就不好說了,可能使用webstorm,也可能使用hbuilder端口都是IDE給生成的.所以肯定有跨域問題.
2.1 場景重現
當服務端提供了接口,我們按正常方式請求時,發生了問題.
現有結構如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.1.js"></script>
</head>
<body>
<button onclick="get()">getSid</button>
<script type="text/javascript">
var url = "http://10.2.1.108:8080";
function get(){
$.ajax({
url:url+'/nutzdemo/userAction/login',
dataType:'json',
success:function(data){
console.log(data);
}
});
}
</script>
</body>
</html>
我們點擊按鈕,發送http請求拉取數據,拋出如下異常
這個錯誤遍是跨域問題
1.3 解決方案
1.3.1 前端解決
見此博文: 點我 點我
1.3.2 后端解決
由於后端使用的nutz,國產開源的一個非常優雅的框架,而且社區非常有Ji情,nutz為跨域提供了統一解決方案,一個Filter~
將此過濾器添加到mvc主模塊上,則應用於所有子模塊的入口函數. so easy~
2. Cookie跨域失效
1.1 場景重現
跨域后Cookie也掛了 = =||,雖然跨域問題解決了,但是跨域遺留問題便是Cookie失效,Cookie失效不當緊,或許你會說失效就失效唄,大不了不用Cookie了唄,不就是本地存儲嘛,我頁面上不用不就得了...然而這也是我們以為的,但殊不知,session是依賴Cookie的,Cookie掛了session也沒了....session沒了,我們服務器拿什么確定你是誰? 沒有session,管你是天王老子,在我這里都是第一次來訪問,統一處理...
session是服務端技術,是解決http協議無狀態無會話一大缺點的技術,session的工作方式為當用戶第一次請求時,tomcat會為你創建一個Session(Session其實就是一個類,即HttpSession),然后這個session就代表你,既然是代表唯一的你,自然是有一個唯一的標識,so,那就是sessionId,為你生成session后,服務端會將對應你session的sessionid隨着響應流來到你的客戶端,然后默認是存儲到Cookie中,當你再次訪問時,瀏覽器默認將sessionid從Cookie里取出,隨着請求到達你的服務器,服務器再從請求中獲取sessionid,然后找出上次那個Session,然后它就知道:'哦,是你這個家伙啊',然后再做相關業務處理.
我后端用的java,如果在我后端服務器的站點上訪問 ,瀏覽器上的 cookie 能存儲到了 jsessionid,session 功能無誤; 但是如果在前端服務器上的站點,每次在站點部署的前端頁面里發送 ajax 請求,后端則會識別不了,每次都認為是一個新的客戶端訪問
so,大概意思就是你輸入用戶名密碼,然后登陸成功了,進入主頁,購買商品,然后還是會要求你重新登陸,為啥嘞? 因為服務器不認識你呀,尼瑪是誰?我跟你熟悉么?滾去登陸去....
1.2 解決方案
問題原因大概是跨域了,會丟了很多響應頭,這些響應頭本應該瀏覽器默認加上的,但不知為何就沒加上,然后剛好tomcat是依賴這些響應頭才能向客戶端傳遞sessionid並存儲到cookie中的,so,既然瀏覽器不能幫我們,那我們可以手動在服務端搞. 攔截請求有多種方式,比如:Servlet Filter,spring的filter,struts2的攔截器等,在此使用我們nutz提供的過濾器,非常之方便.
package demo.hello.filter; import javax.servlet.FilterChain; import javax.servlet.ServletRequest; import javax.servlet.ServletResponse; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.nutz.mvc.ActionContext; import org.nutz.mvc.ActionFilter; import org.nutz.mvc.View; public class PassHttpFilter implements ActionFilter { @Override public View match(ActionContext actionContext) { HttpServletResponse res = actionContext.getResponse(); HttpServletRequest request = actionContext.getRequest(); res.setContentType("textml;charset=UTF-8"); res.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin")); res.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE"); res.setHeader("Access-Control-Max-Age", "0"); res.setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token"); res.setHeader("Access-Control-Allow-Credentials", "true"); res.setHeader("XDomainRequestAllowed","1"); return null; } }
在主模塊注解聲明此Filter
只在服務端處理還不成,客戶端也需要做些事情. 自古便是服務端/瀏覽器默契協調的搭配,才造就了這樣完善的web開發.
這就要求我們每次請求都需要加上這三個頭
xhrFields: {
withCredentials: true
},
crossDomain: true,
完整demo:
function send(){
$.ajax({
url:url+'/nutzdemo/userAction/index',
xhrFields: {
withCredentials: true
},
crossDomain: true,
success:function(data){
alert("發送完成!");
},
error:function(data){
console.log('error:'+data);
}
});
}
[完] 轉載請聯系我,並注明來源.