1.前言前后臺分離式開發(fā),后端提供訪問接口,前端使用ajax拉取數(shù)據(jù),使用vue綁定數(shù)據(jù),各司其職開發(fā)更高效,架構(gòu)高內(nèi)聚低耦合,擴(kuò)展維護(hù)邏輯更簡單,團(tuán)隊(duì)協(xié)作程度更高. 相比于以前后端的兄弟處理完后臺業(yè)務(wù),寫完后臺接口,還需要拿到前端寫的頁面,使用一些頁面渲染技術(shù),比如el,jstl,freemark等來將后臺數(shù)據(jù)生成html結(jié)構(gòu)再響應(yīng)給客戶端展示,這種開發(fā)模式要苦逼很多,比如html結(jié)構(gòu)太復(fù)雜,js操作dom結(jié)構(gòu)太多,后端開發(fā)是不可能搞清楚的,這時你就要問前臺,我應(yīng)該怎么改你的結(jié)構(gòu)呀?這里啥意思呀?這里的js是特效還是操作數(shù)據(jù)了呀?還有就是你可能在修改結(jié)構(gòu)的同時可能會錯亂或者特效丟失的一些情況,然后這樣的話你自己一搬改不了,還要叫前端兄弟,前端兄弟肯定會不耐煩的說:"我給你的時候是好好的,誰知道你怎么改的......" 等等一些頁面問題,這是不是很苦逼,我們可是后端開發(fā),干嘛每天要看著繁雜的html,css,js,熟悉那么多無窮盡的結(jié)構(gòu),這些頁面問題本來就應(yīng)該前端兄弟處理,后端開發(fā)就不應(yīng)該考慮. so,前后端分離開應(yīng)運(yùn)而生. 當(dāng)然了,使用任何一種新的技術(shù)或者架構(gòu),都肯定會多多少少出點(diǎn)問題,然后下面總結(jié)了幾點(diǎn)常見問題以及解決方案. 1. 跨域問題1.1 何為跨域域.指的是一個范圍,一個可見或可控的范圍. web開發(fā)中,在同一協(xié)議,同一主機(jī),同一端口下的項(xiàng)目便是在同一域下.反之有任何一點(diǎn)不同,則都屬于跨域. 我們由于是前后端分離開發(fā),自然要在兩臺或兩臺以上的電腦開發(fā),端口呢也一般是不相同的,后端如果是java的話大多使用tomcat,端口默認(rèn)為8080,前端的話就不好說了,可能使用webstorm,也可能使用hbuilder端口都是IDE給生成的.所以肯定有跨域問題. 2.1 場景重現(xiàn)當(dāng)服務(wù)端提供了接口,我們按正常方式請求時,發(fā)生了問題. 現(xiàn)有結(jié)構(gòu)如下: <!DOCTYPE html> 我們點(diǎn)擊按鈕,發(fā)送http請求拉取數(shù)據(jù),拋出如下異常 這個錯誤遍是跨域問題 1.3 解決方案1.3.1 前端解決見此博文: 點(diǎn)我 點(diǎn)我 1.3.2 后端解決由于后端使用的nutz,國產(chǎn)開源的一個非常優(yōu)雅的框架,而且社區(qū)非常有Ji情,nutz為跨域提供了統(tǒng)一解決方案,一個Filter~ 將此過濾器添加到mvc主模塊上,則應(yīng)用于所有子模塊的入口函數(shù). so easy~
2. Cookie跨域失效1.1 場景重現(xiàn)跨域后Cookie也掛了 = =||,雖然跨域問題解決了,但是跨域遺留問題便是Cookie失效,Cookie失效不當(dāng)緊,或許你會說失效就失效唄,大不了不用Cookie了唄,不就是本地存儲嘛,我頁面上不用不就得了...然而這也是我們以為的,但殊不知,session是依賴Cookie的,Cookie掛了session也沒了....session沒了,我們服務(wù)器拿什么確定你是誰? 沒有session,管你是天王老子,在我這里都是第一次來訪問,統(tǒng)一處理... session是服務(wù)端技術(shù),是解決http協(xié)議無狀態(tài)無會話一大缺點(diǎn)的技術(shù),session的工作方式為當(dāng)用戶第一次請求時,tomcat會為你創(chuàng)建一個Session(Session其實(shí)就是一個類,即HttpSession),然后這個session就代表你,既然是代表唯一的你,自然是有一個唯一的標(biāo)識,so,那就是sessionId,為你生成session后,服務(wù)端會將對應(yīng)你session的sessionid隨著響應(yīng)流來到你的客戶端,然后默認(rèn)是存儲到Cookie中,當(dāng)你再次訪問時,瀏覽器默認(rèn)將sessionid從Cookie里取出,隨著請求到達(dá)你的服務(wù)器,服務(wù)器再從請求中獲取sessionid,然后找出上次那個Session,然后它就知道:'哦,是你這個家伙啊',然后再做相關(guān)業(yè)務(wù)處理. 我后端用的java,如果在我后端服務(wù)器的站點(diǎn)上訪問 ,瀏覽器上的 cookie 能存儲到了 jsessionid,session 功能無誤; 但是如果在前端服務(wù)器上的站點(diǎn),每次在站點(diǎn)部署的前端頁面里發(fā)送 ajax 請求,后端則會識別不了,每次都認(rèn)為是一個新的客戶端訪問 so,大概意思就是你輸入用戶名密碼,然后登陸成功了,進(jìn)入主頁,購買商品,然后還是會要求你重新登陸,為啥嘞? 因?yàn)榉?wù)器不認(rèn)識你呀,尼瑪是誰?我跟你熟悉么?滾去登陸去.... 1.2 解決方案問題原因大概是跨域了,會丟了很多響應(yīng)頭,這些響應(yīng)頭本應(yīng)該瀏覽器默認(rèn)加上的,但不知為何就沒加上,然后剛好tomcat是依賴這些響應(yīng)頭才能向客戶端傳遞sessionid并存儲到cookie中的,so,既然瀏覽器不能幫我們,那我們可以手動在服務(wù)端搞. 攔截請求有多種方式,比如: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 只在服務(wù)端處理還不成,客戶端也需要做些事情. 自古便是服務(wù)端/瀏覽器默契協(xié)調(diào)的搭配,才造就了這樣完善的web開發(fā). 這就要求我們每次請求都需要加上這三個頭
完整demo: function send(){
$.ajax({
url:url+'/nutzdemo/userAction/index',
xhrFields: {
withCredentials: true
},
crossDomain: true,
success:function(data){
alert("發(fā)送完成!");
},
error:function(data){
console.log('error:'+data);
}
});
}
[完] 轉(zhuǎn)載請聯(lián)系我,并注明來源. |
|
|
