使用 Javascript 在前端制作基礎 URL（開發、API 和生產）

Question

無論開發和部署如何，如何制作與 http、https、localhost、端口和實際域一起使用的基礎 url？

Answer 1

我想制作一個基本的 url，無論是在開發中還是在部署/生產中，無論 http/https 協議、端口、本地主機和實際域如何，它都能在所有場景或條件下工作。

所以，我想出了這個基本的東西，通過使用簡單的 javascript 來處理本地服務和構建生產。

基本

var getUrl = window.location;
var baseUrl = getUrl.protocol + "//" + getUrl.host;

這個基礎 url 將在運行時計算並決定實際協議和實際主機名。

進步

如果你想改變API調用不同端口不同微服務的端口，你也可以使用這個function

function changePortForAPI(baseUrl, port) {
    var host = baseUrl.split("//");
    var res = host[1].split(":");
    res[1] = port;
    var result = host[0]+"//"+res[0] +":"+ res[1];
    return result;
}

注意：這個 'changePortForAPI(baseUrl, port)' 用於開發目的，因為在構建時沒有使用端口來進行 API 調用，因為它將由 Apache 和 Z62E0B5B350C9E3D2C19AA8 等服務器處理。

因此，要檢測 localhost/development 部分並為 API 調用使用不同的端口，您可以使用

function inDevelopment(baseUrl){
    var index = baseUrl.indexOf("localhost");
    if(index > 0){
      return true;  
    }
    else{
      return false;
    }
}

檢測到開發模式后，您可以使用“changePortForAPI”function 進行 API 調用，這在開發和部署中也可以正常運行。

編輯：

function inDevelopment(baseUrl){
    var host = baseUrl.split("//");
    var index = host[1].indexOf(":");
    if(index > 0){
      return true;  
    }
    else{
      return false;
    }
}

當您考慮提交更改並且您正在使用與其他開發人員分開的網絡 ip 時，此編輯的 function 很好。