为每个 fetch() 请求设置默认标头答案

【问题标题】：Set default header for every fetch() request为每个 fetch() 请求设置默认标头
【发布时间】：2017-12-02 21:15:05
【问题描述】：

是否可以使用fetch API 为每个请求设置默认标头？
我想要做的是在localStorage 中有一个 json web 令牌时设置一个Authorization 标头。我目前的解决方案是使用此功能设置标题：

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 应用程序。

【问题讨论】：

如果由于某种原因您不想使用现有的 fetch 包装器，那么编写一个来添加授权标头应该是直截了当的。

标签： reactjs express redux authorization fetch-api

【解决方案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

【讨论】：

您可以使用 axios 设置您的授权标头，然后使用普通的 fetch 请求，并且会为 fetch 请求设置标头。

【解决方案2】：

Andri Möll 为 fetch 创建了一个 FetchDefaults.js mixin，用于设置获取默认值：

var Url = require("url")
var assign = require("oolong").assign
var merge = require("oolong").merge
var PARSE_QUERY = false
var PROTOCOL_RELATIVE = true // Enable //example.com/models to mimic browsers.

exports = module.exports = function(fetch, rootUrl, defaults) {
  if (typeof rootUrl === "string") rootUrl = parseUrl(rootUrl)
  else defaults = rootUrl, rootUrl = null
  return assign(exports.fetch.bind(null, fetch, rootUrl, defaults), fetch)
}

exports.fetch = function(fetch, rootUrl, defaults, url, opts) {
  if (rootUrl != null) url = rootUrl.resolve(url)
  if (typeof defaults === "function") defaults = defaults(url, opts)
  return fetch(url, opts == null ? defaults : merge({}, defaults, opts))
}

function parseUrl(url) {
  return Url.parse(url, PARSE_QUERY, PROTOCOL_RELATIVE)
}

在AGPL-3.0-only 许可下分发

【讨论】：

【解决方案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 标头。

【讨论】：