先後端分離開發的一些問題

時間 2019-11-30

標籤後端分離開發一些問題简体版

原文原文鏈接

1.前言　　

　　先後臺分離式開發,後端提供訪問接口,前端使用ajax拉取數據,使用vue綁定數據,各司其職開發更高效,架構高內聚低耦合,擴展維護邏輯更簡單,團隊協做程度更高.javascript

　　相比於之前後端的兄弟處理完後臺業務,寫完後臺接口,還須要拿到前端寫的頁面,使用一些頁面渲染技術,好比el,jstl,freemark等來將後臺數據生成html結構再響應給客戶端展現,這種開發模式要苦逼不少,好比html結構太複雜,js操做dom結構太多,後端開發是不可能搞清楚的,這時你就要問前臺,我應該怎麼改你的結構呀?這裏啥意思呀?這裏的js是特效仍是操做數據了呀?還有就是你可能在修改結構的同時可能會錯亂或者特效丟失的一些狀況,而後這樣的話你本身一搬改不了,還要叫前端兄弟,前端兄弟確定會不耐煩的說:"我給你的時候是好好的,誰知道你怎麼改的......" 等等一些頁面問題,這是否是很苦逼,咱們但是後端開發,幹嗎天天要看着繁雜的html,css,js,熟悉那麼多無窮盡的結構,這些頁面問題原本就應該前端兄弟處理,後端開發就不該該考慮. so,先後端分離開應運而生.css

　　固然了,使用任何一種新的技術或者架構,都確定會多多少少出點問題,而後下面總結了幾點常見問題以及解決方案.html

1. 跨域問題

1.1 何爲跨域

　　域.指的是一個範圍,一個可見或可控的範圍.前端

　　web開發中,在同一協議,同一主機,同一端口下的項目即是在同一域下.反之有任何一點不一樣,則都屬於跨域.vue

　　咱們因爲是先後端分離開發,天然要在兩臺或兩臺以上的電腦開發,端口呢也通常是不相同的,後端若是是java的話大多使用tomcat,端口默認爲8080,前端的話就很差說了,可能使用webstorm,也可能使用hbuilder端口都是IDE給生成的.因此確定有跨域問題.java

2.1 場景重現

　　當服務端提供了接口,咱們按正常方式請求時,發生了問題. jquery

　　現有結構以下:web

<!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請求拉取數據,拋出以下異常ajax

　　這個錯誤遍是跨域問題spring

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);
            }
        });
    }

[完] 轉載請聯繫我,並註明來源.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。