Question

是否可以使用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应用程序，如果有任何帮助的话。

Answer 1

您可以使用Axios代替fetch，使用拦截器

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

Answer 2

有人创建了fetch mixin，默认设置为fetch。

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

Answer 3

创建一个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（）请求设置默认标头

3 个答案: