web-dev-qa-db-fra.com

Définition de l'en-tête d'autorisation dans l'API d'extraction

J'ai un backend Node/Express et je consomme l'API avec un client React. Je veux pouvoir définir l'en-tête d'autorisation après l'inscription d'un utilisateur. Cela garantit que les requêtes suivantes sont envoyés avec l'en-tête d'autorisation.

Je peux voir comment cela se passe dans Axios ici et comment récupérer l'en-tête d'autorisation dans Fetch ici

Est-il possible de faire cela avec Fetch API et comment?

Merci d'avance.

reactjsexpressfetch-api
13
Rowland
var url = "https://yourUrl";
var bearer = 'Bearer ' + bearer_token;
fetch(url, {
        method: 'GET',
        withCredentials: true,
        credentials: 'include',
        headers: {
            'Authorization': bearer,
            'X-FP-API-KEY': 'iphone', //it can be iPhone or your any other attribute
            'Content-Type': 'application/json'
        }
    }).then(responseJson => {
        var items = JSON.parse(responseJson._bodyInit);
    })
    .catch(error => this.setState({
        isLoading: false,
        message: 'Something bad happened ' + error
    }));
26
Pankaj Bhardwaj

Vous pouvez passer les en-têtes comme second paramètre de fetch:

fetch(<your url>, {
  headers: {
     authorization: <whatever is needed here>
   }
})
5
Dario

Autant que je sache, il n'y a aucun moyen d'utiliser les en-têtes/options par défaut avec fetch. Vous pouvez utiliser cette bibliothèque tierce pour le faire fonctionner, ou configurer certaines options par défaut que vous utiliserez ensuite avec chaque demande:

// defaultOptions.js
const defaultOptions = {
  headers: {
    'Authorization': getTokenFromStore(),
  },
};

export default defaultOptions;

Ensuite, utilisez les options par défaut comme:

import defaultOptions from './defaultOptions';

// With default options:
fetch('/auth', defaultOptions);

// With additional (non-default) options:
fetch('/auth', { ...defaultOptions, body: JSON.stringify(additionalData) });
4
Fabian Schultz

Dans mon cas, le problème était que la chaîne que je définissais comme Authorization n'était pas encore générée. Je devais envelopper une promesse et tout à coup cela a fonctionné.

let authHeader: string = await SearchAuthService.getAuthHeader();

0
user3018736