为每个FETCH()请求设置默认标头 [英] Set default header for every fetch() request

问题描述

是否可以使用fetch API为每个请求设置默认标头？ 我想要做的是，只要localStorage中有json Web令牌，就设置一个Authorization头。我目前的解决方案是使用此函数设置Header：

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'
        })
    })

但肯定有更好的方法来做到这一点。我目前正在开发一款Reaction/Redux/Express应用程序，如果它有任何帮助的话。

推荐答案

创建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头文件。

这篇关于为每个FETCH()请求设置默认标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！