無需CORS，用nginx解決跨域問題，輕鬆實現低程式碼開發的前後端分離

葡萄城技術團隊發表於2022-07-15

近年來，前後端分離已經成為中大型軟體專案開發的最佳實踐。

在技術層面，前後端分離指在同一個Web系統中，前端伺服器和後端伺服器採用不同的技術棧，利用標準的WebAPI完成協同工作。這種前後端分離的"混合開發"模式下，前後端通常會部署到不同的伺服器上，即便部署在同一臺機器，因為宿主程式（如後端用Tomcat，前端用nginx）不同，埠號也很難統一。

（圖片來源網路）

這意味著位於A域（如https://foo:80/website）的頁面，需要呼叫B域的WebAPI（如https://bar:8080/webservice），這是一個典型的跨域訪問，瀏覽器預設會判定該操作有安全風險。如果不進行處理，則會拒絕這次WebAPI呼叫，提示對應的錯誤。

（跨域請求導致的錯誤）

現在如何該怎麼解決跨域的問題呢？目前有4個主流技術方案：

JSONP

如果你需要處理的請求只有GET，可以考慮JSONP。

JSONP的原理就是利用<script>標籤沒有跨域限制的特點，通過<script>標籤src屬性，傳送帶有callback引數的GET請求，服務端將介面返回資料拼湊到callback函式中，返回給瀏覽器，瀏覽器解析執行，從而前端拿到callback函式返回的資料。

（JSONP的呼叫流程）

這種做法很常規，但是你需要為前端提供JSONP的響應，其他終端呼叫時提供不帶JSONP的響應，因此會帶來額外的開發和測試工作量。

iFrame

通常情況下，前後端分離帶來的跨域訪問都侷限在同一個主域的不同子域（如a.foo.com和b.foo.com）之間。所以，你可以利用iFrame載入位於被呼叫WebAPI所在域的頁面，然後將兩個頁面的document.domain設定為主域名（如foo.com），就通過iFrame中的子頁面請求WebAPI了。

（圖片來源網路）

這種做法比較麻煩，我們需要為WebAPI配套開發起中轉作用的頁面，但對於開發者而言依舊有很大的開發工作量。

CORS

和前兩種方案相比，CORS（跨域資源共享）是一個"一勞永逸"的方案。

我們不需要為每個WebAPI做額外的處理，而是需要在後端程式啟動時，增加一些處理工作。主流的後端服務都有處理CORS的類庫，這裡就不再做展開介紹了。

這個方案的核心原理，是在發起正式的請求前，先傳送一個OPTIONS謂詞的HTTP請求，詢問發起請求的頁面是否有呼叫該域服務的許可權；如果後端說OK，瀏覽器就繼續請求，否則提示錯誤。

使用這種方案的開發工作量小，如果直接使用成熟類庫的話，開發和測試的工作量甚至可以忽略不計。不過，因為每個跨域的請求都會觸發一次往外的OPTIONS請求，對伺服器會造成額外的開銷和壓力。

反向代理

反向代理機制，把前端的A域和後端的B域合併成一個C域，從根本上解決跨域問題。

這個方案僅需配置，對前後端的程式沒有侵入；同時內網中的反向代理通常也不會帶來額外的效能開銷。

（圖片來源網路）

總體來說在編碼開發的時代，上述四種方案都有適用的應用場景，各有優缺點。進入低程式碼開發時代後，前後端分離的應用面更廣，如使用JavaScript編碼開發前端、配合低程式碼構建的後端，或使用Java編碼開發後端，供低程式碼構建的前端呼叫。

（低程式碼時代的前後端分離，來自低程式碼沙龍）

低程式碼開發的核心價值在於節省開發投入，提升開發效率，所以，方案1（JSONP）和方案2（iFrame）已經很少被用到低程式碼混合開發領域。相比於方案3（CORS），方案4（反向代理）因為效能開銷較小，應用場景會更多一些。

下面，我們將以活字格+nginx為例，介紹利用nginx解決跨域問題，實現前後端分離的具體做法。

（反向代理的架構示意圖）

利用nginx解決跨域問題

開始配置之前，我們使用活字格開發兩個應用，僅包含前端頁面的frontend和包含後端WebAPI（服務端命令）的backend，並將其分別釋出到物理機或雲主機上，應用的埠設定為8081和8080。我們可以通過以下地址訪問這兩個應用：

後端：http://host_name:8080/backend
前端：http://host_name_2:8081/frontend

安裝nginx，並在配置檔案/conf/nginx.conf中HTTP節點配置前後端的伺服器，即upstream節點：


upstream backend {

server host\_name:8080;

}

upstream frontend {

server host\_name\_2:8081;

}

在HTTP節點下的server節點，配置監聽埠和轉發策略，這樣就可以將http://host_name:8080/backend對映為http://proxy_name:8000/backend ，http://host_name_2:8081/frontend 對映為http://proxy_name:8000/frontend


listen 8000;

server\_name proxy\_name;

location /frontend {

proxy\_pass http://frontend/frontend ;

}

location /backend {

proxy\_pass http://backend/backend ;

}

上述操作後，使用者訪問的域名統一成了http://proxy_name:8000，跨域問題解決了。但是，不要著急。活字格預設會啟用Http Referer驗證機制，不允許跨域呼叫內建服務。所以，你還需要開啟前端應用所在的服務端的管理控制檯http://host_name_2:22345/UserService/ManagementPage/WebSecurity

在HTTP Referrer允許列表中新增nginx代理伺服器的地址（也就是使用者實際使用的地址，記得在後面加一個*號適配）。