前後端分離後,後端師傅們應該知道的一些基本前端知識

2021-08-20 08:25:29 字數 1465 閱讀 4362

寫下此文,是因為本人作為前端小白,經常遇到同樣小白的後端,常常不得不三番五次科普一些前端的基礎知識,特此做些總結,也方便有下次的話,直接拿出來給對方看。

1. 什麼是ajax

對於網路請求分類的維度有很多種,有一種就是這個請求傳送出去是否需要重新整理頁面。比如form表單,比如直接從瀏覽器位址列輸入位址請求,這樣的請求都是伴隨著頁面重新整理的。而ajax,全稱非同步js和xml,簡單來說,就是前端向後端傳送請求,無需重新整理頁面,這在注重使用者體驗的前端領域,是極為寶貴的。不過有利就有弊,ajax很方便,但也有很多限制。

對於ajax,後端並不需要了解多麼深入,只需要知道有這麼一回事,同時清楚,現在前後端互動,尤其是在前後端分離的情況下,ajax是使用最普遍的。

2. 跨域

ajax有很多限制,在前後端分離之後,首當其中的就是跨域問題。在以前的諸如ssh框架下搭建的專案,因為前後端都在一起,是較少見跨域這種情況的,因此對於跨域的不了解,是後端小白們比較常見的問題。

乙個網路請求,url格式通常是:protocol://ip:port 。所謂跨域,就是當前頁面的訪問位址(也就是顯示在瀏覽器位址列裡的url)和ajax請求的後端位址在protocol,ip,port三項中至少有一項不一樣。

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

使用cors方案,後端要做的就是在請求響應頭里新增'

access-control-allow-origin

'頭,其值表示允許訪問的源位址。常用的策略是獲取request裡的origin值,然後驗證白名單(或黑名單),通過則將origin值賦給'access-control-allow-origin'響應頭。測試的話,也可以設為*,表示允許來自任何源的跨域請求。

3. options請求

options請求即預檢請求,當乙個請求不是簡單請求時,瀏覽器會先傳送乙個預檢請求,來確認是否能夠請求成功,當能請求成功後,才會傳送「真正」的請求。

當使用跨域ajax的時候,因為會設定各種請求頭資訊,這樣的請求就不是簡單請求,這時就會出現預檢請求的情況,在後端看來就會發現明明前端只請求了一次,卻收到兩次請求的情況,如果處理不當,就會出錯。ps:有些框架可能會預設處理options請求。

4.重定向

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

現在,後端師傅們,你們必須知道一點,不要試圖操作前端了,你們唯一能做的就是告訴前端,你們想要做什麼,至於幫不幫你做,得由我們前端說了算。

當然,這麼說並不是我們前端傲嬌,而是ajax是不允許302重定向的。這個問題比較常見的是一些老專案,要採用前後端進行重構,後端則還是原來那一套,這時就會出現各種返回302的情況。

結語講道理,應該還有很多,只是今天暫時只遇到了這麼些,以後想起了再補充吧。

寫完之後,發現有不少吐槽我們後端同學的地方,突然覺得背離了初衷,貌似不方便直接拿出來給他們看啊。

前後端分離

關於前後端分離的一些好的文章推薦 前端框架 為什麼前後端分離 最直白的理解,我認為是因為在開發過程中,前端總是需要等待後端的環境搭建好之後,前端才能獲取相關資料,對於前端的開發影響很大,事實上前端並不關心後端的開發,那麼有沒有方法不讓後端影響前端的開發呢?其實後端提供的是什麼?乙個執行伺服器,乙個就...

前後端分離

在此說明 前後端分離有利於後端的快速開發,但並不利於搜尋引擎優化 seo 上圖能清晰的看到,使用前後端分離模式進行開發,瀏覽器會向伺服器傳送請求,伺服器會向瀏覽器傳送乙個類似框架的html,是固定的空殼,此時瀏覽器再使用ajax請求向後端伺服器索要資料,後端伺服器返回json字串給瀏覽器,從而使瀏覽...

前後端分離

前後端分離的好處 1 徹底解放前端 2 提高工作效率,分工更加明確。3 區域性效能提公升 4 降低維護成本 2 前後端分離的概念 後台只需要提供api介面,前端呼叫ajax實現資料呈現 3 場景和要求 4 web前端路由 就是根據url分配到對應的處理程式,原理和路由器原理相同,不同的請求位址會交給...