Does anyone knows how I am supposed to manage Nuxt & axios configuration with a multi-tenant API built with django-rest-framework and django-tenants (https://github.com/django-tenants/django-tenants)?
This API is reachable by tenant subdomain: tenant1.example.com/api, tenant2.example.com/api, ... (within my dev environment: tenant1.localhost:8000/api, tenant2.localhost:8000/api, ...)
In my Nuxt app, I want to use #nuxtjs/axios and #nuxtjs/auth-next.
→ How can I proxy axios API URL to take into account the API subdomains (tenant1.example.com/api, ...)?
→ How can I configure auth endpoints (tenant1.example.com/api/login, ...)?
Thanks for your help!
Related
I'm developing a project has two separate projects
Backend : Laravel API
Frontend: VueJS SPA
I want to let the front-end developer develop the front-end project without installing the backend locally.
Can I upload the backend in the Remote server? and frontend locally?
I use a "Session Driver". it has a domain restriction.
frontend: localhost:XXXX
backend: api.example.com
I have a project, using Nuxt 2 as frontend and Php-Laravel as backend app. The app have multiple language on each side also using localized routes in Nuxt + i18n.
We're sending some notification emails on backend managed by cron jobs, some emails contains a links to directed to front end.
But there is too many options due to localized routes and it is hard to manage.
For example, there is a page on frontend
en/account/payments/12345/invoice
tr/hesap/ödemeler/12345/fatura
es/cuenta/pagos/12345/factura
fr/compte/paiements/12345/facture
it/account/pagamenti/12345/fattura
How can i manage that?
I've tried a create server middleware on Nuxt to create these routes and to work act rest api server only return paths as json, but i can't access vue-router on server middleware.
Could you suggest me a solution?
I want to use Nuxt.js for my frontend and laravel sanctum as my backend authentication provider. How should I set the SESSION_DOMAIN key in the .env file in my laravel project.
Also should I edit anything in the server object part in the nuxt.config.js file to make this work?
When you use Sanctum with SPA, such as Nuxt, you've the option to use either API or cookies/sessions. If your application is a first-party application on same top level domain, Laravel recommends to use cookie based approach so you can take advantage of CSRF protection. Axios and Angular Http libraries handles CSRF out of the box, so you don't have to worry too much about handling the requests headers [1].
In your case, I assume your application is first party and is on same top level domain. So your SESSION_DOMAIN value would be for example .domain.com. Also you'll need to set SANCTUM_STATEFUL_DOMAINS=domain.com as well. Usually your SESSION_DOMAIN will have just the main domain your application uses on, while SANCTUM_STATEFUL_DOMAINS will have all the subdomains (if any), that your frontend uses.
To work with Sanctum, we should be familiar with a few things first. We must use our SPA and API backend on the same domain, like frontend on domain.com and API on api.domain.com. We can not set frontend on domain.com and backend (API) on another-domain.com. The client must be able to include cookies with each request being sent to the backend.
session domain is the front-end domain name without protocol and port.
When you are working on local you must set it to localhost and when you are working on server you must set the domain name.
please follow this example of nuxt-laravel-sanctum-auth
I've developed vue js front end and I could communicate backend using axios call and when I call I need to specify backend service port and endpoint. how can I use nginx and docker and then after I use nginx and docker how app communicate with backend ? ultimately I need to deploy front end and backend services on kubernetes cluster.
I've read many tutorial about this and I don't have clear idea in concept and also need to implement the solution. I have never use nginx before
Backend : http://localhost:8084
Here is my axios call
import axios from 'axios'
const API_URL = 'http://localhost:8084'
class NotificationDataService {
retrieveAllNotifications() {
return axios.get(`${API_URL}/notification/getall`);
}
}
export default new NotificationDataService()
with Docker (and thus Kubernetes) approach you have to separate the container from your Frontend and the container from your Backend.
In Kubernetes you can use an Ingress. It is a reverse proxy, so you don't need Nginx. https://kubernetes.io/docs/concepts/services-networking/ingress/
To configure the URL of your Backend in your Vue.js application, I advise you not to use a constant variable as you do, but the configuration system of the Framework: https://cli.vuejs.org/guide/mode-and-env.html#modes.
You need to expose your frontend and backend with your Ingress, because your Axios calls are sent from the client to the backend. So you could have :
www.mydomain.com/ for your Frontend
www.mydomain.com/api for your backend
And now your frontend has only made calls to www.mydomain.com/api.
Translated with www.DeepL.com/Translator (free version)
I have separate backend and frontend. However, they run on the same server (this may change in the future). The backend serves as an api and is powered by Laravel. Frontend by Nuxt (Vue).
I wish only my Nuxt application could access the api. How can I configure Laravel to only return data if the request comes from a Nuxt application?
I thought about adding a special token to requests, but the user will be able to check what request is coming out and capture the token. Can anyone give me ideas how this can be solved?
You must be knowing about CORS. So in your Laravel Server, allow requests from only the frontend server's domain like this:
Access-Control-Allow-Origin: https://www.example.com
Simplest solution would be to add serverMiddleware in the nuxt project and route all the requests to the "real" api through it. Clients will hit the internal nuxt api and they will not be able to see the actual request made to the real api. There you can also add the token you are talking about for extra layer of security.