Short:
How can I set a different port for axios request in nuxt.config, but with same origin domain?
Long:
On my production side I have an express server that delivers my frontend and backend over the same port (e.g. http://192.168.2.22:8800). Axios will make API requests on that same origin with same port. Works very well.
On my dev side I have an express server that delivers only my APIs and I also have the nuxt server, serving the frontend. Both running on different ports (e.g. http://192.168.2.22:8800 for my backend and http://192.168.2.22:3000 for my nuxt). So that I can also execute the API calls in my development environment, I set the baseURL in my nuxt.config to http://localhost:8800.
My problem here is, I can only test my dev environment if I'm on localhost. If I want to access via another pc, the api calls are also started on localhost, which is not reachable.
Is there a way to add a dynamic port to the baseURL?
My nuxt.config right now:
axios: {
baseURL: isDev ? 'http://localhost:8800/api/v1' : '/api/v1'
},
For a better overview.
This is what I want on my production (only express is running):
Frontend: http://192.168.2.22:8800
Backend: http://192.168.2.22:8800
This is what I want on my dev side (two servers are running - express and nuxt):
Frontend: http://192.168.2.22:3000
Backend: http://192.168.2.22:8800
Environment variable are still your best bet here indeed. It will help you configure each environment to your liking and will avoid a lot of mistakes too.
Here is an interesting article on the subject too: https://nuxtjs.org/blog/moving-from-nuxtjs-dotenv-to-runtime-config