Axios-module: API_URL env var only works when set via npm not when you set it in the nuxt.config

[vordimous]

Version

5.3.1

Reproduction link

https://github.com/nuxt-community/axios-module

Steps to reproduce

• create a project
• add a different URL via env vars in the nuxt.config.js

What is expected ?

the baseURL option changes

What is actually happening?

the baseURL option remains defaulted

Additional comments?

expected behavior works when the env var is set via npm at run time i.e. "API_URL=htt://someOtherUrl npm run dev"

_{This bug report is available on Nuxt.js community (#c123)}

[MakeNowJust]

It is nuxt bug and will be fixed by this PR: https://github.com/nuxt/nuxt.js/pull/2974.

[renoirb]

Posting this here, since it is related to Nuxt's axios-module and to leave a trace about it, since this issue is already opened.

How about the possibility to set baseURL for Axios module is found only through window.location.origin at initialization time, only from client-side.

That would feel like a good solution because we never know what will be the desired baseURL from the client-side perspective when the service is ran from a container, with maybe a proxy, from a different Protocol, Hostname, IP address, and/or port.

I might have something that could do just that.

The issue arose when I was trying to package and deploy a Nuxt app that has Koa on the side, and couldn't set/use HOST and PORT from the service running the built JavaScript code.

You can see more notes about this in clarkdo/hare PR #339

Something could be done by creating a client-side only plugin and override $nuxt.$axios.defaults.baseURL at initialization.

For instance, you have a Nuxt project with Koa alongside.
One could build the service like this;

yarn
yarn build
yarn --production

Issue is that the process.env.HOST or other variables gets mingled (e.g. {"baseURL": "http://localhost:3000"} hard-coded) in the build output. And that,
even when using webpack's webpack.EnvironmentPlugin(...) plugin inside nuxt.config.js.

When I run the service like this, I would still see in the client-side XHR requests like OPTIONS http://localhost:3000/ EVEN THOUGH I would have started like this;

./node_modules/.bin/cross-env DEBUG=* \
                              NODE_ENV=production \
                              HOST=foo.dev.local \
                              PORT=9098 \
                              node build/main.js

To attempt working on the problem, I've created a repository and am attempting to be able to build Nuxt, then, run the built version and set HOST and PORT environment variables and Axios module would know what to do. It looks related to the issue here, that's why I'm pasting my workspace here, it might be a good Reproduction link

In case that's of interest to somebody, here is the experiment/reproduction repository

In the branch rework-hare-20180619, I could make it work.
The main part is between those lines

Opinion, aversion?

[qikkeronline]

@vordimous i also ran into this but was able to work around it by renaming the .env key from API_URL to API_URL_TMP and then referring to that variable inside the axios configuration:

require('dotenv').config({path: '../.env'})
module.exports = {
  modules: [
    '@nuxtjs/axios'
  axios: {
    baseURL: process.env.API_URL_TMP  + '/wp-json/wp/v2/'
  },
...

Might not work for all use cases, but solves it nicely for me for now. Said that, this is a quite basic thing that in my opinion should just work properly with @nuxtjs/axios

Hope it helps!

[ricardogobbosouza]

@manniL I think this can be closed

[vordimous]

Thanks for the hard work!

[34r7h]

after 2 days of wrestling, i hope we can reopen this issue. everything works locally. i cannot find the right configuration variables for either heroku or vercel (now.sh). Can someone please explain.. I have an /server-middleware/index.js file that export defaults a connect instance response. nuxt config has the object style [path:'api', handler:'/server-middleware/index']. Tried various combinations of baseurl (domain.com, 0.0.0.0, 127.0.0.0). thanks if anyone can provide the simple config.

[renoirb]

Can you make a reproduce sandbox, or an empty project only reproducing? Fighting with a tool is how this web developer job is done. There must be a variable name in the proper CasE (baseUrl, BaseURL, BASE_URL) and in which/hwere, when it gets injected (as a runtime environment, or transpiled because of how you've set it, etc.). Once we know exactly how you reproduce it, we can improve the docs. Or make a guard to advise of the possibility you've encountered.

Also, it depends when that URL is needed. Is it when Axios is invoked when nuxt is doing the initial load (i.e. not from the browser) or after that initial load, from nuxt client bundle (i.e. everything done client side, nuxt isn't involved anymore, "from the browser"). It's possible its when Axios makes calls from the browser, and you have to have your code adjust for that.