前端編寫靜態HTML頁面，交付給後端開發。靜態頁面可以不考慮業務邏輯在本地開發，只需要實現View。
後端使用模板引擎設置模板，嵌入壹些模板變量和後端提供的壹些邏輯運算。
然後前後端整合對接。有問題前臺返工，後臺返工。
然後整合，直到整合成功。
這個模型的問題是
調試前端時，要安裝壹套完整的後端開發工具，後端程序要全面啟動。遇到問題，需要後端開發幫助調試。我們發現前端和後端耦合嚴重，要求後端人員懂壹些HTML、JS等前端語言。前端頁面也嵌入了很多後端代碼。壹旦用另壹種語言開發了後端，就要重做。
這就增加了很多溝通成本，調試成本等。，而且前後端的開發進度相互影響，大大降低了開發效率。
前端分離不僅僅是壹種開發模式，而是壹種web應用的架構模式。在開發階段，前後臺工程師約定數據交互接口，實現並行開發和測試；在運行階段，前端和後端分離模式需要分離部署web應用，前端和後端使用HTTP或其他協議進行交互請求。
1.客戶端和服務器使用RESTFul API進行交互。
2.前端和後端代碼庫是分離的。
在傳統架構模式下，前端和後端代碼存儲在同壹個代碼庫中，甚至存儲在同壹個項目目錄中。頁面還夾雜了後端代碼。前後臺工程師開發時，必須將整個項目導入到開發工具中。
前端代碼庫與後端代碼庫分離，前端代碼有壹個可用於模擬測試的偽後端(通過構造虛擬測試對象來簡化測試環境)，可以支持前端的自主開發和測試。除了功能實現，後端代碼中還有詳細的測試用例，保證API的可用性，降低集成風險。
3.平行發育
在開發過程中，前端和後端* * *就數據接口的交互形式和數據格式達成壹致。然後前端和後端可以並行開發，其中前端工程師可以在開發完成後單獨進行模擬測試，後端也可以使用Postman等接口測試軟件進行接口自檢，然後前端和後端壹起進行功能調試和格式驗證，最後進行自動化測試。
分開後，發展模式是這樣的。
為優質產品建立精益團隊
通過分離開發團隊的前端和後端，前端和後端工程師只需要專註於前端或後端的開發工作，讓前端和後端工程師實現自主性，培養自己獨特的技術特點，進而構建全棧精益開發團隊。
提高開發效率
前端和後端分離後，前端和後端代碼可以解耦。只要前端和後端進行溝通，並就應用所需的接口和接口參數達成壹致，就可以開始並行開發，而不必等待對方的開發工作結束。同時，即使需求發生變化，只要接口和數據格式不變，後端開發人員也不需要修改代碼，只要前端發生變化即可。這樣整個應用的開發效率會有質的提升。
完美應對復雜多變的前端需求
如果開發團隊能夠完成前端和後端分離的改造，建設優秀的前端和後端團隊，獨立開發，讓開發者專註於專業化，開發能力必然會得到提升，能夠完美應對各種復雜多變的前端需求。
增強代碼可維護性
前端和後端分離後，應用代碼不再混合，只有運行時才會有調用依賴。應用程序代碼將變得整潔清晰，代碼閱讀和代碼維護都將比以前更容易。
使用前端分離架構後，除了開發方式的改變，我們在開發過程中還會遇到哪些問題？我們繼續往下看。
我們來看看傳統開發，我們是如何認證用戶的？
前端登錄，後端根據用戶信息生成壹個jsessionid，並將jsessionid和對應的用戶id保存在會話中，然後將jSessionid傳輸給用戶並存儲在瀏覽器cookie中。之後瀏覽器請求帶這個cookie，後端根據cookie值查詢用戶，驗證是否過期。
HTTP有壹個特點:無狀態，即前後兩個HTTP事務都不知道對方的信息。為了維護會話信息或用戶信息，通常可以使用Cookie和會話技術來緩存信息。
-Cookie存儲在客戶端。
-會話存儲在服務器上。
然而，這樣做存在許多問題。如果我們的頁面存在XSS漏洞，由於cookie可以被JavaScript讀取，XSS漏洞會導致用戶token的泄露，而作為用戶的後端識別，cookie的泄露意味著用戶信息不再安全。雖然我們可以通過對輸出內容進行轉義和使用CDN來盡量避免XSS註入，但是誰也不能保證在大型項目中不會出現這個問題。
當設置cookies時，妳實際上可以為nv.taobao.com、nz.taobao.com和login.taobao.com設置cookies。因此，如果我們想在login.taobao.com登錄，我們仍然可以獲得其他子域下的會話，這需要我們在多個服務器上同步會話。使用JWT沒有這個問題，因為用戶的狀態已經傳送到客戶端。
當客戶端和服務器分別部署到不同的服務器時，會遇到跨域訪問的問題，這是壹種受瀏覽器同源策略限制的請求場景。
跨域解決方案有很多，下面用Nginx反向代理方案。
反向代理
實際上，實際應用中代理訪問的場景有很多。跨域應用的原理是:通過反向代理服務器監聽同壹個端口和域名的訪問，將不同的路徑映射到不同的地址。比如在nginx服務器中，監控相同的域名和端口，向客戶端和服務器轉發不同的路徑，通過反向代理解決跨域問題: