Définir l'en-tête par défaut pour chaque requête fetch()

Question

Est-il possible, en utilisant le fetch API, de définir des en-têtes par défaut pour chaque requête?
Ce que je veux faire est de définir un en-tête Authorization chaque fois qu'il y a un jeton web json dans le localStorage. Ma solution actuelle est de définir les en-têtes avec cette fonction:

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

Réglage des en-têtes dans une demande de récupération doit ressembler à ceci:

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

Mais il doit y avoir une meilleure façon de faire ce. Je développe actuellement une application React/Redux/Express si cela aide.

Answer 1

Vous pouvez utiliser Axios au lieu de chercher, avec Interceptor

const setAuthorization = (token) => { 

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

} 

Où Api est un objet Axios avec une URL de base

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

Et quand vous obtenez votre jeton, u suffit d'appeler la fonction setAuthorization.

Source: Axios README.md

Answer 2

Quelqu'un crée chercher mixin pour défaut de jeu pour aller chercher.

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