在 Fetch API 中设置授权标头

Question

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

我可以在 这里 看到它在 Axios 中是如何完成的，以及如何在 Fetch 中检索授权标头 here

是否可以使用 Fetch API 以及如何做到这一点？

先感谢您。

原文由 Rowland 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

据我所知，无法将默认选项/标题与 fetch 一起使用。你可以使用 这个第三方库 来让它工作，或者设置一些默认选项，然后在每个请求中使用：

 // 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) });

原文由 Fabian Schultz 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

原文由 Pankaj Bhardwaj 发布，翻译遵循 CC BY-SA 4.0 许可协议