0

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.

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 .

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

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.

My main.ts looks like this

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

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

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 .

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 .

illevens
  • 343
  • 1
  • 13
  • That's simple - do not use absolute path. Set `baseURL` to relative path - for example `/api`. – Michal Levý Apr 18 '21 at 10:31
  • @MichalLevý then it doesn't know whether to use t1.mysite.com or t2.mysite.com . And it doesn't change the url it is served on either. I need it to acces. t1.mysite.com/api when i go to t1.mysite and t2.mysite.com/api when I go to t2.mysite.com/api. – illevens Apr 18 '21 at 12:14
  • When you use relative URL, browser always use same domain the current document was served from... – Michal Levý Apr 18 '21 at 12:35
  • @MichalLevý when I set axios.defaults.baseURL = '/api/', my backend doesn't receive any requests. – illevens Apr 18 '21 at 12:47

1 Answers1

1

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

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

publicPath: './'

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/..../....

you can read more about publicPath in vue.js docs

Dharman
  • 30,962
  • 25
  • 85
  • 135
Noy Gafni
  • 1,091
  • 9
  • 19
  • 1
    Your question may seem similar to this but in fact is not. You are using different public path (first URL segment after domain - after 1st `/`). What OP want is just deploy same app with same `publicPath` but to different (sub)domains. Which is sort of default behaviour with `publicPath` set to `/` or `/api` etc – Michal Levý Apr 19 '21 at 08:34