axios-module: base url is not working

Hi,

please help me on my nuxt.config.js

  axios: {
    // See https://github.com/nuxt-community/axios-module#options
    baseURL: environment.API_URL,
    requestInterceptor: (config, {store}) => {
      config.headers.common['Authorization'] = '';
      config.headers.common['Content-Type'] = 'application/x-www-form-urlencoded;application/json';
      return config
    }
  },

and for my actions

 return  axios.post('/verify/phone', querystring.stringify(phoneData))
                    .then(
                        data => {
                            commit('SET_MOBILE', phoneData);
                            return {
                                valid : true,
                                data  : data
                            }
                        },
                        data => {
                            return {
                                valid : false,
                                data  : data
                            }
                        }
                    );

but for the request it request on the localhost http://localhost:3000/verify/phone

<div align="right">_{This question is available on Nuxt.js community (#c118)}</div>

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 30

Most upvoted comments

Just double check that the variable is named baseURL rather than baseUrl. That one got me for a while.

+89

metadeck on Feb 13, 2019

in nuxt.config.js

use like this.

modules: [
  ['@nuxtjs/axios', {
    baseURL: 'http://localhost:8000'
  }]
],

+21

forteleaf on Jul 4, 2018

But actually, I have this problem. As a begginer in nuxt, I tried to use nuxt-axios and it does not work. I spent time looking on how to configure it if I dont have “hardcoded” host… And I failed. This is more strange that if I use just axios - it works out of the box. Maybe somebody knows how to make nuxt-axios work in such situations? Upd: Actually, I found the solution:

  axios: {
    baseURL: '/'
  }

Make it works

eiva on May 16, 2019

Why are you not using this.$auth.loginWith ?? It sets the token and cookie for you, then fetches and sets the user details (on this.$auth.user). Check the example!

Demo: https://github.com/nuxt-community/auth-module/tree/dev/examples/demo

Api: https://github.com/nuxt-community/auth-module/tree/dev/examples/api

Good luck 😃

SnooHD on Apr 27, 2018

Just double check that the variable is named baseURL rather than baseUrl. That one got me for a while.

БЛяяяяяяяяяяяяяяяяя ть

DrBronsy on Sep 9, 2021

If you do not use arrow functions, you can access axios from this:

const sendVerification = function({ app, commit }, phoneData){
   return this.$axios.$post('/verify/phone').then...
}

You can find an example here: https://axios.nuxtjs.org/usage.html#store-actions

This way you do not have to use axios as a plugin.

SnooHD on Apr 26, 2018

use this.$axios instead of axios

Sjoerd on Dec 12, 2020

None of the above works unfortunately. NuxtJS/Axios, all request stay localhost instead of using the value in baseURL.

trainoasis on Dec 3, 2020

Just double check that the variable is named baseURL rather than baseUrl. That one got me for a while.

This is AWESOME! Now what I am sure is that I am blind haha 🤣

haixiangyan on Apr 10, 2020

in nuxt.config.js, instead of:

modules: [ '@nuxtjs/axios', ], axios: { baseURL: 'https://yourapi.com' }

use it:

modules: [ ['@nuxtjs/axios', { baseURL: 'https://yourapi.com' }] ],

felipeblini on Jan 26, 2020

You should declare your baseURL without [] If you want to use it in a plugin, you can read more about how to use the env property here: https://nuxtjs.org/api/configuration-env/

Personally i just directly set the baseUrl in nuxt.config.js for Axios like so:

axios: {
    baseURL: 'http://localhost:6889/'
  },

SnooHD on Apr 25, 2018