标题上的Vue调用API密钥

Question

我的API密钥 = 2356yhtujkiw

我正在VUEJS上使用AXIOS作为获取/发布请求。

API文档说要在所有请求的header上添加该API密钥。

我尝试将其设置为axios.defaults.headers.common['header'] = '2356yhtujkiw';，但没有用。

在标头上定义API KEY的正确方法是什么？

Answer 1

起步时可能会造成混淆，并且某些术语（例如header可能会因上下文而有所不同。

有几种方法可以在vue中实现axios调用。

• 有一种“简单”的方法，您可以在其中将内容直接添加到组件中
• 您可以将其集成到vuex中
• 创建定制的帮助程序/包装器功能（用于组件或vuex）
• 使用vue axios插件

最重要的是，有多种方法可以实现axios

• 重用全局实例
• 为每个呼叫创建新实例

没有看到您的代码，很难知道您使用它的方式，但是我将尝试给出一些步骤，以使其易于复制。

使用以下命令在您的src文件夹中创建api.js：>

import axios from 'axios'
let TOKEN = null;

export default {
  setHeader(val){
    TOKEN = val;
  },
  fetchUsers: () => {
    const instance = axios.create({
      baseURL: 'https://api.example.com',
      headers: {
        header: TOKEN
      }
    });
    // or: instance.defaults.headers.common['header'] = TOKEN;

    return instance.get('/users')
      .then((result) => {
        this.users = result.data
      })
  }
}
然后在组件或Vuex中，您可以...

import api from '../api.js'

// set header
api.setHeader('abc123')

// make api call
api.fetchUsers().then(r=> {console.log(r)});
此（尽管未经测试的代码）应该可以工作...这不是最干净的使用方式，但是应该易于在现有代码中实现。

TL; DR;

axios.defaults.headers.common['header'] = '2356yhtujkiw';不起作用的原因是可能，因为您已经创建了实例，并且正在重新使用它。更新默认值仅适用于创建的后续实例。上面的示例通过不使用任何默认值来解决此问题，而仅在为每个新调用创建的每个新实例中插入标头。