Axios-module: browserBaseURL not change when I change env

[jimliang]

Version

v5.1.0

Reproduction link

https://jsfiddle.net/

Steps to reproduce

In src("@nuxtjs/axios": "^5.3.1",), options use <%= =%> inject into the code:

baseURL : process.browser
      ? '<%= options.browserBaseURL %>'
      : (process.env._AXIOS_BASE_URL_ || '<%= options.baseURL %>'),

it will generate:

    baseURL : process.browser
      ? 'http://localhost:3000/'
      : (process.env._AXIOS_BASE_URL_ || 'http://localhost:3000/'),

Now I change env API_URL_BROWSER, but browserBaseURL will not change.
I must rebuild to fix it.

What is expected ?

browserBaseURL can change depend on API_URL_BROWSER without rebuild

What is actually happening?

browserBaseURL not change

_{This bug report is available on Nuxt community (#c151)}

[pi0]

(In continuation to #157)

Unfortunately, the thing that is happening is something expected because this is how webpack works! It statically replaces all process.env.* values with their constant value during build. So we can't change it at runtime by an env variable. However, this is possible on server side because of Node.js runtime.

There are some possible workarounds for this problem:

• ~#157~ impossible!
• Storing process.env.API_URL_BROWSER in the nuxt state (window.__NUXT__) and restore it at runtime. This only works for SSR mode, not SPA.
• Adding $axios.setBaseURL(url, [browse_url]) helper which is able to dynamically change base URL. (Prefered)
• Supporting baseURL option to accept a function so that we can write a custom function for baseURL at runtime.

[jimliang]

emmm...alrignt...
And can you fix this bug?

[pi0]

@jimliang Hmm we can try to implement any of the workarounds I've mentioned above :)

[Scapal]

This is quite a problem as it renders it quite unusable in a Docker environment, I don't want to start a build each time a container starts.

For the moment I have to put API_URL_BROWSER in the intermediate docker build which renders my Docker image stuck to a unique URL, bye bye deploying it to a staging or prod server from the same image.

[Scapal]

Nevermind, setting ENV API_URL_BROWSER=/ solves my problem

[sontdio]

How did you use axios? I have tried this without problems:

async asyncData({ app }) {
  const ip = await app.$axios.$get('http://icanhazip.com')
  return { ip }
}

From axios module's usage
Just remember: app.$axios (Nuxt module), not axios (normal package) 😝!

[lhermann]

@pi0 I have a related question: Is it possible to change the proxy url at runtime similar to API_URL?

[pi0]

@lhermann Unfortunately technically no because as it is hardcoded in .js files after the webpack build. But you can use a nuxt plugin to change it according to your needs on runtime: (You may leverage process.client to distinguish it for server and client)

export default function ({ $axios }) {
  $axios.defaults.baseURL = 'new baseURL'
}

[lhermann]

@pi0 thank you! I actually thought about doing it this way, but I didn't find a good way to let the client know exactly which url to use.

In the end I did this in nuxt.config.js, and it does use the environment variable at runtime 👍

proxy: {
    "/api/": { target: process.env.API_URL }
}

[pi0]

Proxy is always better idea indeed :)