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