Different baseURL for server and client API calls with axios & nuxt

Question

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.com/api/some-data.

David Levy David Levy · Accepted Answer · 2019-08-15T08:07:40

I found the answer during writing the question..

inside the nuxt.config.js file:

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

Different baseURL for server and client API calls with axios & nuxt

1 Answers