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

1. 什么是ajax

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

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

2. 跨域

      ajax有很多限制，在前后端分離之后，首當(dāng)其中的就是跨域問(wèn)題。在以前的諸如SSH框架下搭建的項(xiàng)目，因?yàn)榍昂蠖硕荚谝黄?，是較少見(jiàn)跨域這種情況的，因此對(duì)于跨域的不了解，是后端小白們比較常見(jiàn)的問(wèn)題。

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

     如果出現(xiàn)了跨域ajax請(qǐng)求，因?yàn)闉g覽器的同源策略限制，如果不做任何處理，那么請(qǐng)求是不能成功的。對(duì)于跨域訪問(wèn)的解決方案有很多，比如jsonp,代理等方式，不過(guò)常用的還是CORS。

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

3. OPTIONS請(qǐng)求

      OPTIONS請(qǐng)求即預(yù)檢請(qǐng)求，當(dāng)一個(gè)請(qǐng)求不是簡(jiǎn)單請(qǐng)求時(shí)，瀏覽器會(huì)先發(fā)送一個(gè)預(yù)檢請(qǐng)求，來(lái)確認(rèn)是否能夠請(qǐng)求成功，當(dāng)能請(qǐng)求成功后，才會(huì)發(fā)送“真正”的請(qǐng)求。

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

4.重定向

      在那個(gè)后端兼職的前端的古老年代，很多邏輯都是后端幫前端來(lái)做的，因此常常一言不合就302重定向。

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

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

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

結(jié)語(yǔ)

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

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

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

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