在 Fetch API 中设置授权标头答案

【问题标题】：Setting authorization header in Fetch API在 Fetch API 中设置授权标头
【发布时间】：2018-01-14 02:39:24
【问题描述】：

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

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

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

提前致谢。

【问题讨论】：

我面临同样的问题，如果你有解决方案请告诉我@Rowland

标签： reactjs express fetch-api

【解决方案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
    }));

【讨论】：

谢谢！对我有用的是“withCredentials”/“credentials”属性。没有它们，我的 Authorization 标头就不会被发送。

【解决方案2】：

据我所知，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) });

【讨论】：

谢谢。我使用了所有这些，但我认为应该有一种方法可以使用 Fetch API 设置授权标头。问题不是用它发出请求，而是在验证用户身份后设置它，例如，在开发工具的 network 面板中，我可以看到它像其他东西一样设置。

【解决方案3】：

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

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

【讨论】：

想要传递的所有值如： Consumer Key: value Consumer Secret: value Access Token: value Access Token Secret: value
您可以将它们作为键添加到 headers 对象：{ authorization: <whatever is needed here>, 'consumer key': <value>, 'consumer secret': <value>, 'Access Token': <value>, 'Access token secret': <value> }

【解决方案4】：

就我而言，问题在于我设置为Authorization 的字符串尚未生成。我不得不把它包装在一个承诺中，突然间它奏效了。

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

【讨论】：