diff --git a/ui.go b/ui.go
index 460cf2d1..671413ff 100644
--- a/ui.go
+++ b/ui.go
@@ -32,12 +32,14 @@ func (h UI) InitUI() {
 	uiapi.Init(h.Config)
 
 	var apiEndpoint = h.Config.UI.APIEndpoint
-	if strings.TrimSpace(apiEndpoint) == "" {
-		apiConfig := &global.Env().SystemConfig.APIConfig
-		apiEndpoint = fmt.Sprintf("%s://%s", apiConfig.GetSchema(), apiConfig.NetworkConfig.GetPublishAddr())
-	}
+	apiConfig := &global.Env().SystemConfig.APIConfig
 
 	ui.HandleUIFunc("/config", func(w http.ResponseWriter, req *http.Request){
+
+		if(strings.TrimSpace(apiEndpoint) == ""){
+			hostParts := strings.Split(req.Host, ":")
+			apiEndpoint = fmt.Sprintf("%s//%s:%s", apiConfig.GetSchema(), hostParts[0], apiConfig.NetworkConfig.GetBindingPort())
+		}
 		buf, _ := json.Marshal(util.MapStr{
 			"api_endpoint": apiEndpoint,
 		})
diff --git a/web/src/services/cluster.js b/web/src/services/cluster.js
index 6a6e1170..af93dd6b 100644
--- a/web/src/services/cluster.js
+++ b/web/src/services/cluster.js
@@ -1,70 +1,74 @@
-import request from '@/utils/request';
-import {buildQueryArgs, ESPrefix} from './common';
+import request from "@/utils/request";
+import { buildQueryArgs, ESPrefix, fetchWithTimeout } from "./common";
 
 export async function getClusterVersion(params) {
-    return request(`${ESPrefix}/${params.cluster}/version`, {
-        method: 'GET'
-    });
+  return request(`${ESPrefix}/${params.cluster}/version`, {
+    method: "GET",
+  });
 }
 
 export async function getClusterMetrics(params) {
-    let id = params.cluster_id;
-    delete(params['cluster_id']);
-    return request(`${ESPrefix}/${id}/metrics?min=${params.timeRange.min}&max=${params.timeRange.max}`, {
-        method: 'GET'
-    });
+  let id = params.cluster_id;
+  delete params["cluster_id"];
+  return request(
+    `${ESPrefix}/${id}/metrics?min=${params.timeRange.min}&max=${params.timeRange.max}`,
+    {
+      method: "GET",
+    }
+  );
 }
 
 export async function createClusterConfig(params) {
-    return request(`${ESPrefix}/`, {
-        method: 'POST',
-        body: params,
-    });
+  return request(`${ESPrefix}/`, {
+    method: "POST",
+    body: params,
+  });
 }
 
 export async function updateClusterConfig(params) {
-    let id = params.id;
-    delete(params['id']);
-    return request(`${ESPrefix}/${id}`, {
-        method: 'PUT',
-        body: params,
-    });
+  let id = params.id;
+  delete params["id"];
+  return request(`${ESPrefix}/${id}`, {
+    method: "PUT",
+    body: params,
+  });
 }
 
 export async function deleteClusterConfig(params) {
-    return request(`${ESPrefix}/${params.id}`, {
-        method: 'DELETE',
-        body: params,
-    });
+  return request(`${ESPrefix}/${params.id}`, {
+    method: "DELETE",
+    body: params,
+  });
 }
 
 export async function searchClusterConfig(params) {
-    let url = `${ESPrefix}/_search`;
-    let args = buildQueryArgs({
-        name: params.name,
-        enabled: params.enabled,
-        from: params.from,
-        size: params.size,
-    });
-    if(args.length > 0){
-        url += args;
-    }
-    return request(url, {
-        method: 'GET',
-    });
+  let url = `${ESPrefix}/_search`;
+  let args = buildQueryArgs({
+    name: params.name,
+    enabled: params.enabled,
+    from: params.from,
+    size: params.size,
+  });
+  if (args.length > 0) {
+    url += args;
+  }
+  return request(url, {
+    method: "GET",
+  });
 }
 
 export async function getClusterStatus(params) {
-    let url = `${ESPrefix}/status`;
-    return request(url, {
-        method: 'GET',
-    });
+  let url = `${ESPrefix}/status`;
+  return request(url, {
+    method: "GET",
+  });
 }
 
 export async function tryConnect(params) {
-    let url = `${ESPrefix}/try_connect`;
-    return request(url, {
-        method: 'POST',
-        body: params,
-    });
-}
\ No newline at end of file
+  let url = `${ESPrefix}/try_connect`;
+
+  return request(url, {
+    method: "POST",
+    body: params,
+  });
+}
diff --git a/web/src/services/common.js b/web/src/services/common.js
index a8f15517..34e6566d 100644
--- a/web/src/services/common.js
+++ b/web/src/services/common.js
@@ -1,46 +1,65 @@
-import $ from 'jquery';
+import $ from "jquery";
 
-function getConfig(){
+function getConfig() {
   const options = {
     url: "/config",
     cache: false,
-    type: 'GET',
-    dataType: 'json', // disable automatic guessing
+    type: "GET",
+    dataType: "json", // disable automatic guessing
     async: false,
   };
-  let result = {}
-  try{
+  let result = {};
+  try {
     const text = $.ajax(options).responseText;
     result = JSON.parse(text);
-  }catch(e){
-    console.warn('failed get config data')
+  } catch (e) {
+    console.warn("failed get config data");
   }
   return result;
-  
 }
-const {api_endpoint} = getConfig();
+const { api_endpoint } = getConfig();
 
 let apiEndpoint = api_endpoint;
-if(!apiEndpoint){
+if (!apiEndpoint) {
   apiEndpoint = API_ENDPOINT;
-  if(!API_ENDPOINT){
-    apiEndpoint = `${location.protocol}//${location.hostname}:2900`
+  if (!API_ENDPOINT) {
+    apiEndpoint = `${location.protocol}//${location.hostname}:2900`;
   }
 }
 
-export const pathPrefix = (apiEndpoint || '') + '/_search-center';
-export function buildQueryArgs(params){
-  let argsStr = '';
-  for(let key in params){
-    if(typeof params[key] !== 'undefined') {
-      argsStr += `${key}=${params[key]}&`
+export const pathPrefix = (apiEndpoint || "") + "/_search-center";
+export function buildQueryArgs(params) {
+  let argsStr = "";
+  for (let key in params) {
+    if (typeof params[key] !== "undefined") {
+      argsStr += `${key}=${params[key]}&`;
     }
   }
-  if(argsStr.length > 0){
-    argsStr = '?' + argsStr
-    argsStr = argsStr.slice(0, argsStr.length -1)
+  if (argsStr.length > 0) {
+    argsStr = "?" + argsStr;
+    argsStr = argsStr.slice(0, argsStr.length - 1);
   }
   return argsStr;
 }
+export const ESPrefix = (apiEndpoint || "") + "/elasticsearch";
 
-export const ESPrefix = (apiEndpoint || '') + '/elasticsearch';
\ No newline at end of file
+export async function fetchWithTimeout(resource, options = {}) {
+  const { timeout = 5000 } = options;
+
+  const controller = new AbortController();
+  const id = setTimeout(() => {
+    controller.abort();
+  }, timeout);
+  try {
+    const response = await fetch(resource, {
+      ...options,
+      signal: controller.signal,
+    });
+    clearTimeout(id);
+    return response.json();
+  } catch (err) {
+    return {
+      error: "timeout",
+    };
+  }
+}