标头上的 Vue 调用 API 密钥答案

【问题标题】：Vue call API key on header标头上的 Vue 调用 API 密钥
【发布时间】：2020-08-20 12:33:51
【问题描述】：

我的 API 密钥 = 2356yhtujkiw

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

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

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

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

【问题讨论】：

这和vuejs有什么关系？这取决于您调用 API 的方式。
你是什么意思？我只需要在标题部分添加 API 密钥，我在 VUE 上找不到标题部分。
您是否尝试过搜索 axios 文档而不是 VUE？ axios 是你的 HTTP 客户端，不是 Vue
修改axios.defaults.headers.common是正确的，但是你需要更仔细地阅读API文档并找到它所期望的标头的实际名称。设置header 标头可能不是您想要的。
@hmm 你是对的。 API 文档的 headers 部分被定义为 S-Api-Key。我刚刚在 axios.get 上将标头替换为 S-API-KEY 并且它起作用了。

标签： api vue.js vuejs2 axios vue-component

【解决方案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'; 不起作用的原因可能是因为您已经创建了实例，并且正在重新使用它。更新默认值仅适用于创建的后续实例。上面的示例解决了这个问题，不使用任何默认值，只是在每个新实例中插入标题，这是为每个新调用创建的。

【讨论】：