Loading [MathJax]/jax/input/TeX/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >使用带有API密钥头的Fetch API

使用带有API密钥头的Fetch API
EN

Stack Overflow用户
提问于 2021-05-10 21:10:17
回答 1查看 739关注 0票数 0

如何配置Fetch API以包含API密钥头?

我已经创建了一个API,通过在报头中包含API密钥,我可以成功地接收来自POSTMAN或Fiddler的响应。

然而,从我的代码(React / Javavascript)使用以下代码片段失败;

代码语言:javascript
运行
AI代码解释
复制
        return fetch(url)
      .then(response => response.json(),{
        mode: 'cors', 
        headers: {
          'x-api-key': '5485748746547e847483983343433243',
          'User-Agent' : 'My-App',
          'Accept': '*/*',
        },
      })
      .catch(error => console.log('Error while fetching:', error))

在Postman中,我可以删除除x-api-key之外的所有头文件,它工作得很好。在我的代码中,头和配置的组合似乎都不起作用。

如果我在Fiddler中捕获请求,则获取请求还没有添加x-api-key头。

配置fetch发送api密钥头的正确方式是什么?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-05-10 21:29:44

你的选择是错误的。它们应该在fetch函数的第二个参数中。

代码语言:javascript
运行
AI代码解释
复制
return fetch(url, {
    mode: 'cors', 
    headers: {
      'x-api-key': '5485748746547e847483983343433243',
      'User-Agent' : 'My-App',
      'Accept': '*/*',
    },
  })
  .then(response => response.json())
  .catch(error => console.log('Error while fetching:', error))
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/67477719

复制
相关文章
Fetch API 使用
在上一章学习 React 组件的时候,想增加 React 对 Ajax 支持的内容,却发现网上的教程竟然用 jQuery 完成 Ajax 请求,个人觉得为了发送一个简单的请求引入 jQuery 库杀鸡焉用宰牛刀啊。其实 W3C 已经有了更好的替代品,那就是: Fetch API。
李振
2021/11/26
1.3K0
fetch api 浅谈
作者:巫枫 fetch api浅谈 作为传说中的xhr替代品,现在fetch api已经被开始在一些前端项目中使用了,比如阿里的一些产品已经将jq的ajax模块切换到fetch下了。个人感觉fetc
serena
2017/05/17
2.5K0
fetch api 浅谈
Fetch API 教程
fetch()是 XMLHttpRequest 的升级版,用于在 JavaScript 脚本里面发出 HTTP 请求。
ruanyf
2020/12/30
3K0
Fetch API 教程
PWA系列——Fetch API
今天聊聊 xhr 的替代品 Fetch,在全局作用域中有个 fetch 方法方便使用。虽然同样也是处理 HTTP 请求和响应的,但 fetch 有两个不同之处,一个是收到错误的 HTTP 状态码时,fetch 方法返回的 Promise 不会被 reject,而是将 resolve 的对象中名为 ok 属性设置为 false,只有在网络出现故障的情况下才会被 reject。另外一个不同之处就是默认不会发送和接收 cookies,如果需要那么必须手动设置 credentials。
JS菌
2019/04/10
9740
PWA系列——Fetch API
简单入门Fetch API
Fetch API是使用 JavaScript请求资源的优秀工具。虽然我们开发时可能是经常使用axios,但是实际上Fetch API也能做很多一样的事。并且使用Fetch API不需要安装axios,所以我们做一些小案例,但是需要调接口的话,Fetch API便是很好的选择,不需要安装axios,也不需要像XMLHttpRequest 对象那样子需要较多步骤。
赤蓝紫
2023/03/16
1.1K0
简单入门Fetch API
如何使用 Python 隐藏 API 密钥
博客首发:https://bornforthis.cn/posts/19.html
AI悦创
2022/06/21
2.3K0
如何使用 Python 隐藏 API 密钥
【JS】1688- 重学 JavaScript API - Fetch API
Fetch API[1] 是一种现代的 JavaScript API,用于进行「网络请求」。它提供了一种更简洁、灵活的方式来发送和接收数据,并取代了传统的 XMLHttpRequest[2]。Fetch API 使用 Promise 对象处理异步操作,使得处理网络请求变得更加直观和易用。
pingan8787
2023/09/01
4690
【JS】1688- 重学 JavaScript API - Fetch API
Ajax 之战:XMLHttpRequest 与 Fetch API
Ajax 是大多数 web 应用程序背后的核心技术,它允许页面向 web 服务发出异步请求,因此数据可以不经过页面往返服务器无刷新显示数据。
深度学习与Python
2022/06/13
2.4K0
Ajax 之战:XMLHttpRequest 与 Fetch API
如何获取云API密钥?
云 API 是腾讯云开放生态的基石。通过云 API,只需少量的代码即可快速操作云产品;在熟练的情况下,使用云 API 完成一些频繁调用的功能可以极大提高效率;除此之外,通过 API 可以组合功能,实现更高级的功能,易于自动化, 易于远程调用, 兼容性强,对系统要求低。以下是具体操作步骤:
腾讯云@移动安全
2019/01/18
82.9K42
如何获取云API密钥?
微信商户号 API 密钥、API 证书配置
只是使用商户号的支付功能可以不配置 API 证书,因为 API 证书只有在一些敏感操作中才用到。比如: 企业付款到零钱、公众号中的现金红包、商户号订单退款,也可以理解为商户号往外出钱的操作
很酷的站长
2022/12/28
6.9K0
微信商户号 API 密钥、API 证书配置
Fetch API速查表:9个最常见的API请求
在之前的文章《Fetch 还是 Axios——哪个更适合 HTTP 请求?》中我对比了 Axios,在小型项目的情况下,使用 Fetch API 只需要几个简单的 API 调用,Fet 是一个很不错的解决方案。
张张
2020/11/26
1.3K0
Fetch API速查表:9个最常见的API请求
JavaScript Fetch API 新手入门指南
文章来源:https://www.oxxostudio.tw/articles/201908/js-fetch.html
前端达人
2019/09/10
1.2K0
JavaScript Fetch API 新手入门指南
Fetch:新一代Ajax API
一直以来,我们使用的Ajax技术,实际是由各浏览器的XMLHttpRequest(XHR)对象实现。但由于XHR接口难用而且落后(不能Promise),所以实际项目中一般采用jQuery这种第三方库封装的Ajax功能。
WEBJ2EE
2019/07/19
7730
Fetch:新一代Ajax API
腾讯云 API 最佳实践:保护你的密钥
使用腾讯云 API 时,你需要用密钥来签名你的 API 请求。腾讯云接收到你的请求后,会比对你的签名串和实际请求参数。
zqfan
2018/07/18
15.7K2
跟我一起探索 HTTP-Fetch API
Fetch API 提供了一个获取资源的接口(包括跨网络通信)。对于任何使用过 XMLHttpRequest 的人都能轻松上手,而且新的 API 提供了更强大和灵活的功能集。
用户1418987
2023/10/16
2830
跟我一起探索 HTTP-Fetch API
js api 之 fetch、querySelector、form、atob及btoa
转载请注明出处: https://www.cnblogs.com/funnyzpc/p/11095862.html
上帝
2019/07/04
1.6K0
【API架构】使用 JSON API 的好处
在 API 工艺的世界里,没有比设计更受热议的领域了。从 REST、gRPC 到 GraphQL,有许多方法可以设计和标准化 Web API 交互。今天,我们将注意力转向另一种方法,JSON API,JSONAPI.org 上详细介绍的用于构建 API 的规范。
架构师研究会
2022/05/29
2.9K0
通过GiHub 查找 API 密钥、令牌和密码
关键词: Passwords api_key “api keys” authorization_bearer: oauth auth authentication client_secret api_token: “api token” client_id password user_password user_pass passcode client_secret secret password hash OTP user auth
Khan安全团队
2022/05/17
1.1K0
通过GiHub 查找 API 密钥、令牌和密码
【API测试】使用Dredd测试您的API
通常,在开发应用程序时,前端和后端开发人员在实现路径上采用两条不同的路径。前端开发人员更多地是设计驱动的,而后端开发人员则更注重数据。这通常会导致潜在的整合差距,其中一个团队在提供的数据,响应的结构等方面具有某些期望,而另一个团队实现完全不同的东西。
架构师研究会
2019/06/02
1.7K0
点击加载更多

相似问题

用Fetch API读取响应头

74

使用带有API密钥的R

20

在Fetch API中设置授权头

57

带有Api密钥的访问

11

带有JavaScript的API密钥

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档