在 Vue.js 中发出请求时，如何在基本 url 中使用变量并编写配置？

Posted 2023-02-22

【中文标题】在 Vue.js 中发出请求时，如何在基本 url 中使用变量并编写配置？

【英文标题】：how to use variables in base url and compose config when making the request in Vue.js?

【发布时间】：2021-07-12 18:24:46

【问题描述】：

我想要实现的目标 - 让 vue 为 foo1.bar.com 提供服务，其中“foo”是多租户项目中租户的名称。所以 vue 使用的基础 API 在访问 foo2.bar.com 时变为 foo2.bar.com/api ，在访问 foo3.bar.com 时变为 foo3.bar.com/api 。

上下文：这是与现有多租户后端 API 实现一致性的建议方法，其 URL 类似于 t1.site.com/api 和 t2.site.com/api。

在reddit上建议作为对这个问题的回应：

我几乎完成了我的第一次解耦（前端和后端是 单独的）项目 - 后端是用 django + rest 编写的 框架并实现多租户（意味着我的 api 端点看起来 像tenant1.sitename.com/api/endpoint 和 租户2.sitename.com/api/endpoint) 。在我开发的时候，我假设 从前端开始使用我的api应该没有问题 对所有租户都是一样的，所以 django 可以使用相同的 vue 前端无论哪个租户..蚂蚁然后它打动了我-实际上 它是 vue 消耗 django api，而不是其他方式.. vue 没有 知道选择了哪个租户..所以现在我非常接近最后期限 丢了。

我的 main.ts 是这样的

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

并且可以工作......而我需要第一个租户的数据......

我不完全确定应该在 baseUrl 中使用该变量，或者应该使用该 typescript，但正如我所说，我当前的设置在 main.ts 中有 baseurl。

重申： 我有一个为 t1.foo.com/api 和 t2.foo.com/api 等不同租户提供后端服务的 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 请求。

【问题讨论】：

这很简单——不要使用绝对路径。将 baseURL 设置为相对路径 - 例如 /api。

@MichalLevý 那么它不知道是使用 t1.mysite.com 还是 t2.mysite.com 。它也不会改变它所提供的 url。我需要它来访问。当我访问 t1.mysite 时为 t1.mysite.com/api，当我访问 t2.mysite.com/api 时为 t2.mysite.com/api。

当你使用相对 URL 时，浏览器总是使用与当前文档相同的域...

@MichalLevý 当我设置 axios.defaults.baseURL = '/api/' 时，我的后端没有收到任何请求。

【参考方案1】：

我之前问过一个类似的问题，我得到了这个完整的详细信息answer

如果我理解正确，我认为最好的解决方案是在vue.config.js 文件中设置：

publicPath: './'

它将所有请求到后端的 url 设置为所服务的 html 文件的相对 url（包括 css、js 等静态文件......）。 例如，如果您使用此 URL t1.mysite.com/index.html 访问您的应用程序 - 所有请求都将发送到 t1.mysite.com/..../....

你可以在vue.js docs阅读更多关于publicPath的信息

【讨论】：

您的问题可能看起来与此类似，但实际上并非如此。您正在使用不同的公共路径（域之后的第一个 URL 段 - 在第一个 / 之后）。 OP 想要的只是将相同的应用程序与相同的 publicPath 部署到不同的（子）域。这是publicPath 设置为/ 或/api 等的默认行为