web-dev-qa-db-ja.com

Fetch APIで認証ヘッダーを設定する

Node/Expressバックエンドがあり、APIをReact Client。認証ヘッダーとともに送信されます。

Axios here でどのように実行されるか、Fetch here で認証ヘッダーを取得する方法を確認できます。

Fetch APIでこれを行うことはできますか？

よろしくお願いします。

reactjsexpressfetch-api
13
Rowland
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
    }));
26
Pankaj Bhardwaj

フェッチの2番目のパラメーターとしてヘッダーを渡すことができます。

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

私の知る限り、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) });
4
Fabian Schultz

私の場合、問題はAuthorizationとして設定していた文字列がまだ生成されていないことでした。私はそれを約束で包まなければならなかったが、突然うまくいった。

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

0
user3018736