使用 Fetch API 和 API 键 header

Question

我们如何配置 Fetch API 以包含 API 键 header？

我创建了一个 API，通过在 header 中包含 API 键，我可以成功接收来自 POSTMAN 或 Fiddler 的响应。

但是，在我的代码 (React / Javavascript) 中，使用以下代码片段失败；

        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 之外的所有 header，它工作正常。 header 的组合或配置似乎在我的代码中不起作用。

如果我在 Fiddler 中捕获请求，x-api-key header 还没有被 Fetch 请求添加。

配置 fetch 以发送 api 键 header 的正确方法是什么？

Answer 1

你的选项放错地方了。它们应该在获取函数的第二个参数中。

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))

使用 Fetch API 和 API 键 header

Using the Fetch API with API key header

javascript

http-headers

react-native

fetch-api