在 Fetch API 中设置权限 header

Question

我有一个 Node/Express 后端，我正在使用 React 客户端使用 API。我希望能够在用户注册后设置授权 header。这确保了后续请求在授权 header 的情况下发送。

我可以在 Axios 中看到它是如何完成的 and how to retrieve the authorization header in Fetch

是否可以使用 Fetch API 执行此操作以及如何执行此操作？

提前致谢。

Answer 1

您可以将 headers 作为 fetch 的第二个参数传递：

fetch(<your url>, {
  headers: {
     authorization: <whatever is needed here>
   }
})

Answer 2

据我所知，无法将默认 options/headers 与 fetch 一起使用。您可以使用 this third party library 让它工作，或者设置一些默认选项，然后在每个请求中使用：

// defaultOptions.js
const defaultOptions = {
  headers: {
    'Authorization': getTokenFromStore(),
  },
};

export default defaultOptions;

然后使用默认选项，如：

import defaultOptions from './defaultOptions';

// With default options:
fetch('/auth', defaultOptions);

// With additional (non-default) options:
fetch('/auth', { ...defaultOptions, body: JSON.stringify(additionalData) });

Answer 3

var url = "https://yourUrl";
var bearer = 'Bearer ' + bearer_token;
fetch(url, {
        method: 'GET',
        withCredentials: true,
        credentials: 'include',
        headers: {
            'Authorization': bearer,
            'X-FP-API-KEY': 'iphone', //it can be iPhone or your any other attribute
            'Content-Type': 'application/json'
        }
    }).then(responseJson => {
        var items = JSON.parse(responseJson._bodyInit);
    })
    .catch(error => this.setState({
        isLoading: false,
        message: 'Something bad happened ' + error
    }));

Answer 4

在我的例子中，问题是我设置为 Authorization 的字符串尚未生成。我不得不用一个承诺来包装它，突然间它起作用了。

let authHeader: string = await SearchAuthService.getAuthHeader();

在 Fetch API 中设置权限 header

Setting authorization header in Fetch API

express

reactjs

fetch-api