无论开发和部署如何,如何制作适用于 http、https、localhost、端口和实际域的基本 url?
使用 Javascript(开发、API 和生产)在前端制作基本 URL
IT技术
javascript
reactjs
angular
vue.js
url
2021-05-08 06:32:48
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 等服务器处理。
所以,要检测本地主机/开发部分并使用不同的端口进行 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 时,此编辑功能很好。