對原始服務器的HTTP請求

Question

我正在使用帶有單獨的后端和前端軟件的Web應用程序。 兩者都由同一服務器的不同端口（分別為80和3000）提供服務。

前端應用程序（在Vue.js中開發）通過HTTP請求與后端服務器進行通信。 我正在使用axios庫發送那些請求。

問題是，此Web應用程序的實例（包括字體端和后端）將被部署在針對不同客戶的多個不同服務器上，並且似乎很難對每個實例中的服務器地址進行硬編碼解。

如何在前端應用程序中配置axios，以將HTTP請求發送到提供服務的同一地址？

例如，從example.com提供服務的實例應將請求發送到http://example.com:3000而從example2.com提供服務的實例應將請求發送到http://example2.com:3000 。

Answer 1

您可以使用location.host屬性。 Location是用於處理網址操作的API。 它的host屬性包含網站的當前宿主URL。 例如，如果您在stackoverflow內鍵入控制台location.host ，則會看到stackoverflow.com 。 您可以為每個現有的前端URL編寫映射以映射到API baseUrl，例如：

const mapping = {
   'example.com': 'api.example.com',
   'example2.com': 'api.example2.com'
};

function findApiUrl(){
    return mapping[location.host];
}

const baseUrl = findApiUrl(); // pass it to axios