vue js cannot use custom axios settings

Question

I'm using axios in my cue project and trying to set some custom default setting to use it.

So i made a axios.js file

import axios from 'axios'

const API_URL = 'http://localhost:8081'

export default axios.create({
  baseUrl: API_URL,
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + localStorage.token
  }
})

then i mounted it in here /components/axios/index.js using my axios

import Vue from 'vue'
import VueAxios from 'vue-axios'

import axios from './axios'

Vue.use(VueAxios, axios)

In this way i should have set globally axios with my settings right?

So in my Login.vue component file i call this method

login() {
      this.$http
        .post("/oauth/token", {
          username: this.email,
          password: this.password,
          client_id: "test",
          client_secret: "test",
          grant_type: "password"
        },
        )
        .then(request => this.loginSuccessful(request))
        .catch(() => this.loginFailed());
    }

but $http does not have my custom settings but axios generic

Varit J Patel · Accepted Answer · 2019-03-24 09:03:38Z

2

Well, I run into the same issue and found that baseURL is case-sensitive.

Hence baseUrl should be baseURL and everything will work fine.

Here is axios documentation for the creating instance.

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

Here is working Codesandbox

Hope this helps!

answered Mar 24, 2019 at 9:03

Varit J Patel

3,5201 gold badge15 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brugher · Accepted Answer · 2019-03-24 09:08:30Z

1

good luck to find an answer. But are you sure to use correctly axios ? I see this.$http.post is for the normal request without axios and on npm VueAxios don't use this.

I can recommend you this link https://fr.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

answered Mar 24, 2019 at 9:08

Brugher

1432 gold badges3 silver badges13 bronze badges

Collectives™ on Stack Overflow

vue js cannot use custom axios settings

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related