在 Vue.js 中发出请求时如何使用基本 url 中的变量并组合配置? [英] how to use variables in base url and compose config when making the request in Vue.js?

问题描述

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

What I want to achieve - for vue to serve a foo1.bar.com where "foo" is a name of the tenant in multitenant project. So base API that vue uses becomes foo2.bar.com/api when foo2.bar.com is accessed and foo3.bar.com/api when foo3.bar.com is accessed.

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

Context: this is a suggested way to achieve coherence with existing multitenant backend API, URLs of which look like t1.site.com/api and t2.site.com/api .

有人建议在 reddit 上回答这个问题:

It was suggested on reddit as a response to this question:

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

I have almost finished my first decoupled (frond and back ends are separate) project - the back end is written with django + rest framework and implements multitenancy (means my api endpoints look like tenant1.sitename.com/api/endpoint and tenant2.sitename.com/api/endpoint) . While I was developing, I assumed that there shouldn't be a problem consuming my api since the front end is the same for all tenants, so django could just consume same vue front end no matter which tenant.. ant then it struck me - actually it's vue consuming django api, not other way around.. and vue doesn't know which tenant is selected..So now I'm very close to a deadline and lost.

我的 main.ts 看起来像这样

My main.ts looks like this

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

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

并且有效...而我需要第一个租户的数据....

and works... while I need the first tenant's data....

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

I'm not entirely sure that variable is supposed to be used in baseUrl, or that typescript is supposed to be used, but as I said, my current setup has baseurl in main.ts .

重申:我有一个后端服务 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 时，我想实现我的前端将 api 请求发送到 t1.foo.com/api .

To reiterate: I have one back-end serving api for different tenants like t1.foo.com/api and t2.foo.com/api and one front-end that currently only sends requests to only one baseurl defined in settings, for example t1.foo.com/api ; It then serves it on t1.foo.com/home . Problem is, if I would to go to t2.foo.com/home , it would still send requests to t1.foo.com/api . I know neither how to make different (t1,t2,t3) urls accessible nor how to make it send requests to matching api. I want to acieve my frontent sending the api request to t1.foo.com/api when i go to to t1.foo.com/home and t2.foo.com/api when I go to t2.foo.com/home .

推荐答案

我之前问过一个类似的问题，我得到了完整详细的答案

I asked a similar question before and I got this full detailed answer

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

if I understand you correctly I think the best solution for is to set this in vue.config.js file:

publicPath: './'

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

which sets the url of all request to the backend to the relative url of the served html file (including static files like css, js...). For example if you access you application with this url t1.mysite.com/index.html - all request will be sent to t1.mysite.com/..../....

您可以在 vue.js 文档

这篇关于在 Vue.js 中发出请求时如何使用基本 url 中的变量并组合配置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！