Vue JS не может использовать пользовательские настройки Axios

Question

Я использую axios в своем проекте cue и пытаюсь установить некоторые пользовательские настройки по умолчанию для его использования.

Итак, я создал файл axios.js

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

затем я установил его здесь /components/axios/index.js, используя мои axios

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

import axios from './axios'

Vue.use(VueAxios, axios)

Таким образом, я должен был установить глобально axios с моими настройками, верно?

Итак, в моем файле компонента Login.vue я называю этот метод

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());
    }

но $http не имеет моих пользовательских настроек, но универсальный axios

Answer 1

Ну, я столкнулся с той же проблемой и обнаружил, что baseURL чувствителен к регистру.

Следовательно, baseUrl должно быть baseURL, и все будет работать нормально.

Вот axios документация для создаваемого экземпляра.

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

Здесь работает Codesandbox

Надеюсь, это поможет!

Answer 2

удачи, чтобы найти ответ. Но вы уверены, что правильно используете axios? Я вижу это. $ Http.post для обычного запроса без axios, и на npm VueAxios не использует это.

Я могу порекомендовать вам эту ссылку https://fr.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html