reactjs - 为每个 fetch() 请求设置默认 header

Question

是否可以，使用 fetch API ，为每个请求设置默认 header ？
我想要做的是每当 localStorage 中存在 json Web token 时设置一个 Authorization header 。我当前的解决方案是使用此函数设置标题:

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

在获取请求中设置 header 将如下所示:

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

但是必须有更好的方法来做到这一点。我目前正在开发一个 React/Redux/Express 应用程序(如果有帮助的话)。

Answer 1

创建 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 header 。