前后端分離開發(fā)的一些問題

春和秋榮 2019-06-24

展開全文

1.前言　　

　　前后臺(tái)分離式開發(fā),后端提供訪問接口,前端使用ajax拉取數(shù)據(jù),使用vue綁定數(shù)據(jù),各司其職開發(fā)更高效,架構(gòu)高內(nèi)聚低耦合,擴(kuò)展維護(hù)邏輯更簡(jiǎn)單,團(tuán)隊(duì)協(xié)作程度更高.

　　相比于以前后端的兄弟處理完后臺(tái)業(yè)務(wù),寫完后臺(tái)接口,還需要拿到前端寫的頁(yè)面,使用一些頁(yè)面渲染技術(shù),比如el,jstl,freemark等來(lái)將后臺(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í)候是好好的,誰(shuí)知道你怎么改的......" 等等一些頁(yè)面問題,這是不是很苦逼,我們可是后端開發(fā),干嘛每天要看著繁雜的html,css,js,熟悉那么多無(wú)窮盡的結(jié)構(gòu),這些頁(yè)面問題本來(lái)就應(yīng)該前端兄弟處理,后端開發(fā)就不應(yīng)該考慮. so,前后端分離開應(yīng)運(yùn)而生.

　　當(dāng)然了,使用任何一種新的技術(shù)或者架構(gòu),都肯定會(huì)多多少少出點(diǎn)問題,然后下面總結(jié)了幾點(diǎn)常見問題以及解決方案.

1. 跨域問題

1.1 何為跨域

　　域.指的是一個(gè)范圍,一個(gè)可見或可控的范圍.

　　web開發(fā)中,在同一協(xié)議,同一主機(jī),同一端口下的項(xiàng)目便是在同一域下.反之有任何一點(diǎn)不同,則都屬于跨域.

　　我們由于是前后端分離開發(fā),自然要在兩臺(tái)或兩臺(tái)以上的電腦開發(fā),端口呢也一般是不相同的,后端如果是java的話大多使用tomcat,端口默認(rèn)為8080,前端的話就不好說了,可能使用webstorm,也可能使用hbuilder端口都是IDE給生成的.所以肯定有跨域問題.

2.1 場(chǎng)景重現(xiàn)

　　當(dāng)服務(wù)端提供了接口,我們按正常方式請(qǐng)求時(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請(qǐng)求拉取數(shù)據(jù),拋出如下異常

　　這個(gè)錯(cuò)誤遍是跨域問題

1.3 解決方案

1.3.1 前端解決

　　見此博文: 點(diǎn)我點(diǎn)我

1.3.2 后端解決

　　由于后端使用的nutz,國(guó)產(chǎn)開源的一個(gè)非常優(yōu)雅的框架,而且社區(qū)非常有Ji情,nutz為跨域提供了統(tǒng)一解決方案,一個(gè)Filter~

　　將此過濾器添加到mvc主模塊上,則應(yīng)用于所有子模塊的入口函數(shù). so easy~

2. Cookie跨域失效

1.1 場(chǎng)景重現(xiàn)

　　跨域后Cookie也掛了 = =||,雖然跨域問題解決了,但是跨域遺留問題便是Cookie失效,Cookie失效不當(dāng)緊,或許你會(huì)說失效就失效唄,大不了不用Cookie了唄,不就是本地存儲(chǔ)嘛,我頁(yè)面上不用不就得了...然而這也是我們以為的,但殊不知,session是依賴Cookie的,Cookie掛了session也沒了....session沒了,我們服務(wù)器拿什么確定你是誰(shuí)? 沒有session,管你是天王老子,在我這里都是第一次來(lái)訪問,統(tǒng)一處理...

　　session是服務(wù)端技術(shù),是解決http協(xié)議無(wú)狀態(tài)無(wú)會(huì)話一大缺點(diǎn)的技術(shù),session的工作方式為當(dāng)用戶第一次請(qǐng)求時(shí),tomcat會(huì)為你創(chuàng)建一個(gè)Session(Session其實(shí)就是一個(gè)類,即HttpSession),然后這個(gè)session就代表你,既然是代表唯一的你,自然是有一個(gè)唯一的標(biāo)識(shí),so,那就是sessionId,為你生成session后,服務(wù)端會(huì)將對(duì)應(yīng)你session的sessionid隨著響應(yīng)流來(lái)到你的客戶端,然后默認(rèn)是存儲(chǔ)到Cookie中,當(dāng)你再次訪問時(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)上訪問 ,瀏覽器上的 cookie 能存儲(chǔ)到了 jsessionid,session 功能無(wú)誤; 但是如果在前端服務(wù)器上的站點(diǎn),每次在站點(diǎn)部署的前端頁(yè)面里發(fā)送 ajax 請(qǐng)求,后端則會(huì)識(shí)別不了,每次都認(rèn)為是一個(gè)新的客戶端訪問

　　so,大概意思就是你輸入用戶名密碼,然后登陸成功了,進(jìn)入主頁(yè),購(gòu)買商品,然后還是會(huì)要求你重新登陸,為啥嘞? 因?yàn)榉?wù)器不認(rèn)識(shí)你呀,尼瑪是誰(shuí)?我跟你熟悉么?滾去登陸去....

1.2 解決方案

　　問題原因大概是跨域了,會(huì)丟了很多響應(yīng)頭,這些響應(yīng)頭本應(yīng)該瀏覽器默認(rèn)加上的,但不知為何就沒加上,然后剛好tomcat是依賴這些響應(yīng)頭才能向客戶端傳遞sessionid并存儲(chǔ)到cookie中的,so,既然瀏覽器不能幫我們,那我們可以手動(dòng)在服務(wù)端搞. 攔截請(qǐng)求有多種方式,比如: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ā).

　這就要求我們每次請(qǐng)求都需要加上這三個(gè)頭

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)源.

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：春和秋榮 > 《IntelliJ IDEA》

舉報(bào)/認(rèn)領(lǐng)