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