在Fetch API中设置授权标头

Question

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

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

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

先感谢您。

Answer 1

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 2

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

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

Answer 3

据我所知，没有办法使用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 4

在我的情况下，问题是我设置为Authorization的字符串尚未生成。我不得不将它包装在一个承诺中，然后它突然起作用了。

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