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 lost.
My main.ts looks like this
axios.defaults.baseURL = 'http://tenant1.mysite.local:8000/api/';
axios.defaults.withCredentials = true;
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 don't 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 .
Edit: I have asked the separate question about how to achieve a suggested solution: how to use variables in base url and compose config when making the request in Vue.js?