Let's say I'm developing a platform with multi micro-services, and Nuxt frontend service is one of them. I'm using Axios inside a nuxt middleware (which is running in both server and client). inside the nuxt service, the API baseURL is an internal call in local machine, but from client-side, the baseURL is the public app domain off course.

I can solve it using the server's request object, or config files, or to distinguish the run environment. Every option i mentioned can work, but right now I'm looking for a best practice for different client vs. server environment variables.

the middleware file:

import axios from 'axios'

export default function ({ route }) {
  return axios.get('api/some-data');
}

request from server should call to "http://internal-service:SOME_PORT/api/some-data.

request from client should call to ".

Let's say I'm developing a platform with multi micro-services, and Nuxt frontend service is one of them. I'm using Axios inside a nuxt middleware (which is running in both server and client). inside the nuxt service, the API baseURL is an internal call in local machine, but from client-side, the baseURL is the public app domain off course.

I can solve it using the server's request object, or config files, or to distinguish the run environment. Every option i mentioned can work, but right now I'm looking for a best practice for different client vs. server environment variables.

the middleware file:

import axios from 'axios'

export default function ({ route }) {
  return axios.get('api/some-data');
}

request from server should call to "http://internal-service:SOME_PORT/api/some-data.

request from client should call to "http://my-domain./api/some-data.

• javascript
• vue.js
• axios
• nuxt.js

1 Answer 1

I found the answer during writing the question..

inside the nuxt.config.js file:

  axios: {
    baseURL: 'http://internal-service:5000',
    browserBaseURL: 'http://my-domain.' //can use environment variables to fill both..
  },