web-dev-qa-db-ja.com

fetch（）リクエストごとにデフォルトのヘッダーを設定します

fetch API を使用して、すべてのリクエストにデフォルトのヘッダーを設定することは可能ですか？
私がしたいのは、Authorizationにjson WebトークンがあるときはいつでもlocalStorageヘッダーを設定することです。私の現在の解決策は、この関数でヘッダーを設定することです：

export default function setHeaders(headers) {
    if(localStorage.jwt) {
        return {
            ...headers,
            'Authorization': `Bearer ${localStorage.jwt}`
        }
    } else {
        return headers;
    }
}

フェッチリクエストでヘッダーを設定すると、次のようになります。

return fetch('/someurl', {
        method: 'post',
        body: JSON.stringify(data),
        headers: setHeaders({
            'Content-Type': 'application/json'
        })
    })

しかし、これを行うにはより良い方法が必要です。現在、React/Redux/Expressアプリを開発しています。

reactjsexpressreduxauthorizationfetch-api
17
eRodY

誰かがデフォルトに設定するフェッチミックスインを作成します。

https://github.com/moll/js-fetch-defaults

5
Nantaphop

インターセプターでは、フェッチの代わりに Axios を使用できます

const setAuthorization = (token) => {

  api.interceptors.request.use((config) => {
    config.headers.Authorization = 'Bearer ' + token;
    return config;
  });

}

ApiはベースURLを持つaxiosオブジェクトです

const api= axios.create({
  baseURL: 'http://exemple.com'
});

そして、トークンを取得したら、関数setAuthorizationを呼び出すだけです。

出典： Axios README.md （

5
Hugo Chevalier

fetchラッパーを作成すると、問題を解決できます。

function updateOptions(options) {
  const update = { ...options };
  if (localStorage.jwt) {
    update.headers = {
      ...update.headers,
      Authorization: `Bearer ${localStorage.jwt}`,
    };
  }
  return update;
}

export default function fetcher(url, options) {
  return fetch(url, updateOptions(options));
}

また、Axiosまたは他のパッケージの方が良いと判断した場合、アプリケーションのすべての呼び出しに対して要求クライアントを簡単に切り替えることができるという利点もあります。また、options.bodyはオブジェクトであり、'Content-Type: application/jsonヘッダー。

0
underblob