Standard-Header für jede Anforderung fetch() festlegen

Question

Ist es möglich, mit der fetch API Standard-Header für jede einzelne Anfrage festzulegen?
Was ich tun möchte, ist ein Authorization Header gesetzt, wenn es ein Json Web Token in der localStorage ist. Meine aktuelle Lösung ist die Header mit dieser Funktion setzen:

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

die Header in einer Abrufanforderung einstellen würde dann wie folgt aussehen:

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

Aber es muss ein besserer Weg, um zu tun, Dies. Ich entwickle gerade eine React/Redux/Express App, wenn das hilfreich ist.

Answer 1

Sie könnten Axios verwenden, anstatt zu holen, mit Interceptor

const setAuthorization = (token) => { 

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

} 

Wo Api ist ein axios Objekt mit einer Basis-URL

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

Und wenn Sie Ihr Token erhalten, u müssen nur anrufen die Funktion setAuthorization.

Quelle: Axios README.md

Answer 2

Jemand erstellen mixin für Satz Standard holen zu holen.

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