Axios-module: Change baseUrl after build via environment

[purrplingcat]

Hi,

I have a question about changing baseUrl. So I build my nuxt project with axios mudule for production via nuxt build and I see in log this:

nuxt:axios BaseURL: http://localhost:3000/api (Browser: /api) +0ms

So I want start my built project via nuxt start. I specify my API baseUrl via env variable API_URL to http://localhost:6060. I see in log this:

nuxt:axios BaseURL: http://localhost:6060/ (Browser: http://localhost:6060/) +0ms

After application start, i make request via axios, but request url is http://localhost:3000/api instead of specified http://localhost:6060/ at env variable.

How I can change API_URL via environment after project build?

Thanks.

---

Axios module version: 4.5.2
Nuxt version: 1.3.0

_{This question is available on Nuxt.js community (#c77)}

[pi0]

Hi @EllenFawkes.

Would you please try upgrading to 5.0.0-rc.2? Also if you need to dynamically change endpoints, i suggest using proxy mode like this:

axios: {
  proxy: true
},
proxy: {
  '/api': 'http://localhost:6060'
}

This way you no longer have to worried about such problems.

[purrplingcat]

I don't need static configuration for build. I need use ENV VARIABLE because I run it in Docker.

[pi0]

It can be dynamic indeed (And we exactly use same approach at Fandogh for our Docker deployments):

proxy: {
  proxy: true
},
proxy: {
  '/api': process.env.API_URL || 'http://localhost:6060' // Or maybe more suitable using PROXY_API_URL
}

[purrplingcat]

It's not works. '/api/' returns nuxt 404 page.

axios: {
    proxy: true,
    // proxyHeaders: false
  },
  proxy: {
    '/api': process.env.APIURL || 'http://10.0.0.143:8080'
  },

My deps:

"dependencies": {
    "@nuxtjs/axios": "^4.5.2",
    "@nuxtjs/proxy": "^1.1.4",
    "axios": "^0.17.1",
    "deepmerge": "^2.0.1",
    "moment": "^2.20.1",
    "nuxt": "^1.3.0",
    "vue2-google-maps": "^0.8.4",
    "vue2-highcharts": "^1.1.6",
    "vuetify": "^0.17.6"
  }

As bonus: Error has'nt status code. error.status is empty, so i can't right handle 404 error :(

[pi0]

The proxy option needs "@nuxtjs/axios": "^5.0.0-rc.2" :) Also by upgrading you will get valid error objects.

[purrplingcat]

I upgraded to ^5.0.0-rc.2, proxy WORKS, but error.status is still undefined at browser side.

[pi0]

For status code, I think it is axios behavior. You can access it using error.response.status. example.

[purrplingcat]

I must use check for error.response && error.response.status.. It's works :+1:

Is any way to log proxy requests to a real api server?

[pi0]

This should do the trick: (not tested) docs

```js
'/api': {
target: process.env.API_URL || 'http://10.0.0.143:8080',
logLevel: 'debug'
}

[purrplingcat]

It's amazing, it's works! But I see only my path to proxied host. I don't see full proxied path on server after proxy.

[HPM] GET /api/search ~> http://10.0.0.143:8080

It will be more usefull I can see [HPM] GET /api/search ~> http://10.0.0.143:8080/search

[pi0]

@EllenFawkes Unfortunately, there is nothing we can do. even logProvider passes same entries to the provider. Maybe we can open an issue in http-proxy-middleware repository and reference this problem.

[hoanghiep1x0]

I had a similar problem.
My resolution step is as follows:
Delete folder .nuxt + remove cache in browser
Changer

  axios: {
     baseURL: 'http: // localhost: 8080/api'
   }

It works as expected. Before that, I tried a lot of ways like community tutorials but not effective.

[maxiride]

I'm chiming in, even after 2 years from the first post.

The ENV variable API_URL is consumed only at build time and not at runtime too.

If I launch my app with this example docker-compose, API_URL is not passed down to nuxt.

docker-compose.yml

frontend:
  image: test-frontend:latest
  ports:
    - "3000:3000"
  environment:
    - 'API_URL=http://pippo.test'

nuxt.config.js

  axios: {
    proxy: true,
    debug: true
  },
  proxy: {
    '/api': process.env.API_URL
  },

So the question remains, how can we set the axios baseURL at runtime.

I want to deploy nuxt in a docker container and I don't care the address it will be access from, as long as every axios request is made to that hostname + /api

[pi0]

While the proxy method is still valid, runtimeConfig support coming soon :)