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是用于处理使用url进行操作的API。其host属性包含网站的当前主机网址。例如，如果您在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

对源服务器的HTTP请求

1 个答案: