在 Fetch API 中设置授权标头

IT技术 reactjs express fetch-api
2021-05-02 08:55:16

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

我可以在这里看到它是如何在 Axios 中完成的,以及如何在此处获取 Fetch 中的授权标头

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

先感谢您。

4个回答
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
    }));

据我所知,无法将默认选项/标头与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) });

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

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

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

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