基於Spring Boot架構的先後端徹底分離項目API路徑問題

最近的一個項目採用先後端徹底分離的架構，前端組件：vue + vue-router + vuex + element-ui + axios，後端組件：Spring Boot + MyBatis。之因此這樣作是爲了考慮後端水平擴容的便利性，在部署的時候徹底能夠將先後端彼此獨立部署，前端部署能夠直接使用諸如Nginx這樣的高性能Web服務器。

前端須要知道它所訪問的後端服務器IP地址才能訪問到數據，可是若是將IP地址硬編碼在前端代碼中的話，在部署的時候會存在一個問題：當服務器端IP地址變化以後必須從新打包發佈（開發，測試和產線的環境不一樣，也須要針對特定環境打包）。

相對路徑

若是後端項目的上下文路徑爲「/」，那麼出於對資源利用率的考慮，在項目前期（規模小）能夠將先後端部署在同一個嵌入式Tomcat容器中（Spring Boot框架支持靜態頁面）。此時，在前端項目的Ajax請求中可使用相對路徑，以下所示：

var url = "/api/v1/data"
$.get(url, function(data){
    alert("Data Loaded: " + data);
});

此時Ajax會自動在相對路徑前面加上http://host:port ，而且上下文路徑爲「/」，那麼最終的請求的API路徑爲：http://host:port/ + 相對路徑。此時就不用在前端的代碼中硬編碼後端地址和端口了，可是注意這個用法的前提必須知足2個條件：
(1)先後端必須部署在同一個容器
(2)後端的上下文路徑必須爲「/」

絕對路徑

隨着項目的發展，先後端要同時支持水平擴容（集羣化），此時須要考慮將先後端徹底獨立部署，那麼在前端的Ajax請求中就不能使用相對路徑了（由於主機地址已經不一樣，存在跨域），對於後端API的訪問只能使用絕對路徑，並且也只能硬編碼後端的訪問地址和端口（如：http://host:port/api/xxx ）。爲了應對這種尷尬的局面，能夠考慮使用域名的方式訪問後端服務，這樣只要域名不變，前端的訪問地址就不用變動。