前後端分離最簡單的做法是前端使用ajax請求後端返回的json物件

避免跨域訪問這塊在小專案中的做法是前後端放在同一個主機上，也可以使用jsonp或者指定不限制伺服器請求域，還有其他的暫時沒想起來

1. 前端專注於寫前端的頁面樣式，後臺開發人員專注於寫業務邏輯，提供前端所需的各種介面，最後由前端開發人員進行呼叫真實介面除錯。

2. 避免跨域，可以使用nginx進行跳轉。譬如：後臺提供介面地址為 http://10.1.2.3/api/1.0/web/login，可在nginx中進行配置，proxyTable "/api/1.0/web" "http://10.1.2.3/"，表示，凡是呼叫以/api/1.0/web開頭的url地址，都跳轉到（路由）10.1.2.3這個IP地址上，從而解決了跨域問題。

3. 前後端進行程式碼聯調時，一般都有個api文件，比較常用的是swagger，有興趣可以瞭解一下。

前後端分離實現了技術上更大的專一性，並且賦予了前後資料的靈活性！公司現在沿用的阿里系前後端分離，姑且分享下！

前後端分離之前的時代，MVC框架大行其道，通常是前端(後臺親切稱呼為寫靜態頁面的)開發HTML頁面，包括CSS等，然後由後端開發人員統一進行動態資料繫結，這樣前端的能力沒有體現出來，而後端也對改樣式，調佈局不勝其煩，而且前後端耦合容易引發相互汙染，專案笨重等缺點，這時候分離是最好的選擇！

原始的MVC模型圖示:

讀寫分離就是將原來後端的框架MVC分為MC＋V，後端controller只需要控制流程的流轉，許可權認證，業務邏輯等，model層為業務程式碼與資料層的連線，整個View層全部作為前端專案的形式拆分，單獨部署在不同的服務節點上，實現分離！

分離之前View與controller的資料傳輸只需要透過轉發或者重定向，將資料傳遞到頁面，使用特定的EL表示式進行資料接收與顯示，分離之後兩個專案通常在不同的伺服器中，資料的傳輸涉及到網路通訊，所以需要在滿足一定的傳輸協議的基礎上進行動態資料的處理！

前後端分離怎麼做的呢？

①，後端:後端設計好資料結構後，根據需求提供一套介面文件，內容包括遵循http協議的介面暴露地址，入參，返回物件形式，然後開發好相應的功能介面進行對外服務！（後端框架還是沿襲之前的spring，springboot，mybatis等等）

②，前端:前端則需要把前端程式碼部署在node.js上，node.js相當於js版本的JVM，是基於google的V8引擎開發的，專門提供給js程式碼解釋環境的一套元件，node.js使用了非同步事件驅動，非阻塞的處理模型，能支援大量的併發連線，前段專注於頁面渲染和動態資料顯示。

③，前後端互動:後端透過一定協議(http，https等)暴露服務，前端相應的進行呼叫即可，但是因為瀏覽器具有同源策略，如果是其他域名的指令碼通常不會執行，也就是說發生了跨域，怎麼實現通訊呢？我們才用的是反向代理的方式，透過nginx配置一個對映地址，比如瀏覽器需要的同源地址為http://123.com，好的沒問題，我給你這麼訪問，在訪問某個介面(比如a/b/get)nginx中我透過配置對映將http://123.com/a/b/get對映為http://234.com/a/b/get(後端)實際的暴露地址，實現了資料的獲取！

前端打包構建後，把靜態資源放在nginx伺服器裡面，配置好nginx即可。

後端全部用RestController，然後在nginx中配置好代理到後端。

這就是整個架構了。如果後端需要多例項，那就在nginx中配置負載均衡。

由此可見，整個過程都是圍繞nginx的，所以要搞清楚nginx的使用。這裡的nginx起到了三個作用:http server，proxy server，load blance。