使用 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 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 和 Nginx 等服务器处理。

所以，要检测 localhost/development 部分并使用不同的端口进行 API 调用，您可以使用

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

检测到开发模式后，您可以使用“changePortForAPI”函数进行 API 调用，在开发和部署时也可以正常运行。

已编辑：

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

当您考虑提交更改并且您正在使用与其他开发人员分开的网络 ip 时，此编辑功能很好。