Axios-module: baseURL settings do not take effect for axios

[begueradj]

Version

v5.1.0

Reproduction link

https://github.com/begueradj/nuxt-axios-baseurl-bug

Steps to reproduce

1. Clone my repo and change to the resulted directory
2. Intall the dependencites: yarn install
3. Launch the server: yarn run dev

What is expected ?

expect the number of displayed posts to be 100.

This means in pages/index.vue, when I have this code:

mounted() {
    axios.get('/posts')
    .then(response => {
      this.posts = response.data
    })
    .catch(e => {
      this.errors.push(e)
    })
  }

axios should recoginize the baseURL configuration key I set in nuxt.config.js and thus fetch data from http://jsonplaceholder.typicode.com/posts

Here is my nuxt.config.js file content related to axios module:

modules: [
    // Doc: https://github.com/nuxt-community/axios-module#usage
    ['@nuxtjs/axios', {
      baseURL: 'http://jsonplaceholder.typicode.com'
    }]
  ],
  /*
  ** Axios module configuration
  */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
  },

What is actually happening?

1. The number of displayed posts is 0

2. axios is trying to send a get request to http://localhost/posts instead of http://jsonplaceholder.typicode.com/posts

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

[aldarund]

Its not a bug. You are import fresh instance of axios instead of using this.$axios
It clearly described in docs how you should use it
https://axios.nuxtjs.org/usage

[cmty[bot]]

This bug-report has been cancelled by @aldarund.

[begueradj]

@aldarund I guess I misued it, you are right. I wonder if you have time to tell me briefly if there are differences between using the 2 options (in terms of performance). Thank you

[aldarund]

no, there wont be difference in terms of performance

[sangdth]

It does not work in my case even when I used $axios

module.exports = {
    mode: 'universal',

    env: {
        apiUrl: process.env.API_URL || 'http://localhost:8000'
    },

    axios: {
        baseURL: process.env.apiUrl
    },
    ...

In .vue components, if I called process.env.apiUrl it will return "http://localhost:8000" which is correct as expected. But if I call this.$axios.defaults.baseURL it will be empty.

Why?

[marko-mlinarevic]

it doesn't work at mine also

[mandaputtra]

Just remember to do npm run dev again after change settings -_-

[begueradj]

This is what worked for me @marko-mlinarevic and I believe it should work for you too:

modules: [
  '@nuxtjs/axios',
],
axios: {    
  baseURL: 'point_to_your_URI'
}

[sangdth]

I do believe it should work in that way. I just don't understand why sometimes it does not work. That's why we came here to report.

[miyarappo]

@sangdth

Hi! I was able When you are doing

import API_URL from ...

module.exports = {
    mode: 'universal',

    // can not read env in this object. can use other files
    env: {
        apiUrl: process.env.API_URL || 'http://localhost:8000'
    },

    axios: {
        // can not use 
        baseURL: process.env.apiUrl
       // can use
       baseURL: API_URL || 'http://localhost:8000'
    },
    ...

[shrishankit]

baseURL not Changeing
I have tested every possible way but none of them is working, and if I am suppose to use this.$axios plz, tell me where to use it .

[begueradj]

@shrishankit During the installation of your nuxt application, you chose axios. So just open the file called nuxt.config.js in the home directory of your project and complete the axios settings (baseURL in your case) there.

[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.

[dlodeprojuicer]

This was My mistake was I was overriding the initial axios.baseURL value set in nuxt.config.js with a none existing store.state.api_url value in my axios interceptors script.... Silly mistake but worth noting

  axios: {
    // See https://github.com/nuxt-community/axios-module#options
    baseURL: config.settings.api_url
  },

export default function({ $axios, store, redirect }) {
  $axios.defaults.baseURL = store.state.api_url; // <---- NOTE
  .....
}

[DerekCrosson]

@shrishankit During the installation of your nuxt application, you chose axios. So just open the file called nuxt.config.js in the home directory of your project and complete the axios settings (baseURL in your case) there.

If only it was this easy...

[skewness]

it worked for me adding require('dotenv').config() to the nuxt.config.js

[genu]

@skewness This worked for me as well..

I think the docs should be clear about this. They just say "They can be customized with API_PREFIX, API_HOST (or HOST) and API_PORT (or PORT) environment variables."

which is not true, unless the .env file is loaded.... unless it means passing in the env variables as arguments? ¯_(ツ)_/¯

[begueradj]

You can make a pull request for that :smile: @genu

[pawel-marciniak]

Is this still the case? Should I add require('dotenv').config() on top of nuxt.config.js to enable .env variables?

[mandaputtra]

@pawel-marciniak yes, if you want to use dotenv use it like that

[trainoasis]

This is what worked for me @marko-mlinarevic and I believe it should work for you too:

modules: [
  '@nuxtjs/axios',
],
axios: {    
  baseURL: 'point_to_your_URI'
}

unfortunately does not work. tried all options here :D