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

Version

v5.1.0

Reproduction link

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

Steps to reproduce

Clone my repo and change to the resulted directory
Intall the dependencites: yarn install
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?

The number of displayed posts is 0
axios is trying to send a get request to http://localhost/posts instead of http://jsonplaceholder.typicode.com/posts

<div align="right">_{This bug report is available on Nuxt community (#c181)}</div>

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 23 (3 by maintainers)

Most upvoted comments

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

+21

skewness on Oct 15, 2019

@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? ¯_(ツ)_/¯

genu on Dec 18, 2019

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?

sangdth on Feb 27, 2019

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

aldarund on Oct 25, 2018

@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…

DerekCrosson on May 27, 2019

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

mandaputtra on Mar 31, 2019

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

mandaputtra on Apr 24, 2020

@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'
    },
    ...

miyarappo on Apr 6, 2019

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'
}

begueradj on Mar 31, 2019

no, there wont be difference in terms of performance

aldarund on Nov 4, 2018