vue js 无法使用自定义 axios 设置答案

【问题标题】：vue js cannot use custom axios settingsvue js 无法使用自定义 axios 设置
【发布时间】：2019-08-14 17:49:36
【问题描述】：

我在我的 cue 项目中使用 axios，并尝试设置一些自定义默认设置来使用它。

所以我做了一个 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
  }
})

然后我使用我的 axios 将它安装在 /components/axios/index.js 中

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 通用

【问题讨论】：

标签： vue.js axios

【解决方案1】：

好吧，我遇到了同样的问题，发现 baseURL 是区分大小写的。

因此baseUrl 应该是baseURL，一切都会正常工作。

这里是 axios documentation 用于创建实例。

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

这里正在工作Codesandbox

希望这会有所帮助！

【讨论】：

【解决方案2】：

祝你好运找到答案。但是你确定正确使用 axios 吗？我看到了。$http.post 用于没有 axios 的正常请求，并且在 npm VueAxios 上不要使用它。

我可以向您推荐此链接 https://fr.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

【讨论】：