首頁技術(shù)文章正文

前后端分離后,后端師傅們應(yīng)該知道的一些

更新時間:2018-09-18 來源:黑馬程序員技術(shù)社區(qū) 瀏覽量:

1. 什么是ajax

        對于網(wǎng)絡(luò)請求分類的維度有很多種,有一種就是這個請求發(fā)送出去是否需要刷新頁面。比如form表單,比如直接從瀏覽器地址欄輸入地址請求,這樣的請求都是伴隨著頁面刷新的。而ajax,全稱異步j(luò)s和xml,簡單來說,就是前端向后端發(fā)送請求,無需刷新頁面,這在注重用戶體驗的前端領(lǐng)域,是極為寶貴的。不過有利就有弊,ajax很方便,但也有很多限制。

        對于ajax,后端并不需要了解多么深入,只需要知道有這么一回事,同時清楚,現(xiàn)在前后端交互,尤其是在前后端分離的情況下,ajax是使用最普遍的。


2. 跨域

      ajax有很多限制,在前后端分離之后,首當(dāng)其中的就是跨域問題。在以前的諸如SSH框架下搭建的項目,因為前后端都在一起,是較少見跨域這種情況的,因此對于跨域的不了解,是后端小白們比較常見的問題。

      一個網(wǎng)絡(luò)請求,url格式通常是:protocol://ip:port 。所謂跨域,就是當(dāng)前頁面的訪問地址(也就是顯示在瀏覽器地址欄里的url)和ajax請求的后端地址在protocol,ip,port三項中至少有一項不一樣。

     如果出現(xiàn)了跨域ajax請求,因為瀏覽器的同源策略限制,如果不做任何處理,那么請求是不能成功的。對于跨域訪問的解決方案有很多,比如jsonp,代理等方式,不過常用的還是CORS。

     使用CORS方案,后端要做的就是在請求響應(yīng)頭里添加'Access-Control-Allow-Origin'頭,其值表示允許訪問的源地址。常用的策略是獲取request里的origin值,然后驗證白名單(或黑名單),通過則將origin值賦給'Access-Control-Allow-Origin'響應(yīng)頭。測試的話,也可以設(shè)為*,表示允許來自任何源的跨域請求。


3. OPTIONS請求

      OPTIONS請求即預(yù)檢請求,當(dāng)一個請求不是簡單請求時,瀏覽器會先發(fā)送一個預(yù)檢請求,來確認(rèn)是否能夠請求成功,當(dāng)能請求成功后,才會發(fā)送“真正”的請求。

      當(dāng)使用跨域ajax的時候,因為會設(shè)置各種請求頭信息,這樣的請求就不是簡單請求,這時就會出現(xiàn)預(yù)檢請求的情況,在后端看來就會發(fā)現(xiàn)明明前端只請求了一次,卻收到兩次請求的情況,如果處理不當(dāng),就會出錯。PS:有些框架可能會默認(rèn)處理OPTIONS請求。


4.重定向

      在那個后端兼職的前端的古老年代,很多邏輯都是后端幫前端來做的,因此常常一言不合就302重定向。

      現(xiàn)在,后端師傅們,你們必須知道一點,不要試圖操作前端了,你們唯一能做的就是告訴前端,你們想要做什么,至于幫不幫你做,得由我們前端說了算。

      當(dāng)然,這么說并不是我們前端傲嬌,而是ajax是不允許302重定向的。這個問題比較常見的是一些老項目,要采用前后端進(jìn)行重構(gòu),后端則還是原來那一套,這時就會出現(xiàn)各種返回302的情況。

      比如本人就遇到多次這樣的問題。我們公司的登錄認(rèn)證是采用sso形式的,很多老項目都是當(dāng)請求來時,驗證cookie,不通過,直接上302跳SSO服務(wù)。而這樣的代碼一般都是通用的,我們的小白后端或者是直接繼承了前輩的項目,或者是復(fù)制的以前的項目代碼而不知這個隱蔽的情況。當(dāng)我試圖請求不成功,發(fā)現(xiàn)302后,我跟他說不能重定向,他一臉懵逼的搖頭,我沒重定向啊(有的還會問什么是重定向,這種情況我只能甩他一個百度百科)。直到我看到響應(yīng)頭里的Location包含著sso等字樣,我不得不長嘆一口氣,告訴他認(rèn)證那塊呢,同志!


結(jié)語

      講道理,應(yīng)該還有很多,只是今天暫時只遇到了這么些,以后想起了再補(bǔ)充吧。

      寫完之后,發(fā)現(xiàn)有不少吐槽我們后端同學(xué)的地方,突然覺得背離了初衷,貌似不方便直接拿出來給他們看啊。

本文版權(quán)歸黑馬程序員JavaEE學(xué)院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請注明作者出處。謝謝!

作者:黑馬程序員前端與移動開發(fā)培訓(xùn)學(xué)院
首發(fā):http://web.itheima.com/?v2 

分享到:
在線咨詢 我要報名
和我們在線交談!