vue.js - 如何为多租户项目的 API 设置 axios 基础 URL？

Question

我几乎完成了我的第一个解耦（前端和后端是分开的）项目 - 后端是用 django + rest 框架编写并实现多租户（意味着我的 api 端点看起来像tenant1.sitename.com/api/endpoint 和tenant2.sitename .com/api/endpoint) 。在我开发时，我认为使用我的 api 应该没有问题，因为所有租户的前端都是相同的，所以无论哪个租户，django 都可以使用相同的 vue 前端.. ant 然后让我印象深刻-实际上它是 vue 消耗 django api，而不是其他方式.. vue 不知道选择了哪个租户.. 所以现在我很迷茫。

我的 main.ts 看起来像这样

axios.defaults.baseURL = 'http://tenant1.mysite.local:8000/api/';
axios.defaults.withCredentials = true;

重申一下：我有一个后端服务 api 用于不同的租户，如 t1.foo.com/api 和 t2.foo.com/api 和一个前端，目前只向设置中定义的一个 baseurl 发送请求，例如t1.foo.com/api；然后它在 t1.foo.com/home 上提供服务。问题是，如果我要去 t2.foo.com/home ，它仍然会向 t1.foo.com/api 发送请求。我既不知道如何使不同的 (t1,t2,t3) url 可访问，也不知道如何使其向匹配的 api 发送请求。当我去 t1.foo.com/home 和 t2.foo.com/api 去 t2.foo.com/home 时，我想实现我的前端向 t1.foo.com/api 发送 api 请求。

编辑：我已经问过关于如何实现建议的解决方案的单独问题：在 Vue.js 中发出请求时如何使用基本 url 中的变量和撰写配置？

标签： vue.jsaxiosvue-router