标头上的 Vue 调用 API 密钥
Posted
技术标签:
【中文标题】标头上的 Vue 调用 API 密钥【英文标题】:Vue call API key on header 【发布时间】: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 并且它起作用了。
【参考方案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';
不起作用的原因可能是因为您已经创建了实例,并且正在重新使用它。更新默认值仅适用于创建的后续实例。上面的示例解决了这个问题,不使用任何默认值,只是在每个新实例中插入标题,这是为每个新调用创建的。
【讨论】:
以上是关于标头上的 Vue 调用 API 密钥的主要内容,如果未能解决你的问题,请参考以下文章
只需在 HTTP 标头中发送一个密钥即可对 REST 调用进行身份验证?
无法使用 Vue 和 Codeigniter 进行本地 Api 调用
如何使用 API 密钥和秘密保护 Spring Boot API
如何使用 Postman 客户端调用 Twitter API
登录表单上的 Vue-Apollo V4 组合 API @vue/apollo-composable。 TS2349:此表达式不可调用。类型 'Ref<any>' 没有调用签名