Authentification de base avec récupération?

Je veux écrire une authentification de base simple avec fetch, mais j'obtiens toujours une erreur 401. Ce serait génial si quelqu'un me disait ce qui ne va pas avec le code:

let base64 = require('base-64');

let url = 'http://eu.httpbin.org/basic-auth/user/passwd';
let username = 'user';
let password = 'passwd';

let headers = new Headers();

//headers.append('Content-Type', 'text/json');
headers.append('Authorization', 'Basic' + base64.encode(username + ":" + password));

fetch(url, {method:'GET',
        headers: headers,
        //credentials: 'user:passwd'
       })
.then(response => response.json())
.then(json => console.log(json));
//.done();

function parseJSON(response) {
return response.json()
}

Il vous manque un espace entre Basicle nom d'utilisateur et le mot de passe encodés.

headers.set('Authorization', 'Basic ' + base64.encode(username + ":" + password));

Une solution sans dépendances.

Nœud

headers.set('Authorization', 'Basic ' + Buffer.from(username + ":" + password).toString('base64'));

Navigateur

headers.set('Authorization', 'Basic ' + btoa(username + ":" + password));

Vous pouvez également utiliser btoa au lieu de base64.encode ().

headers.set('Authorization', 'Basic ' + btoa(username + ":" + password));

Si vous avez un serveur principal qui demande les informations d'identification de base avant l'application, cela suffit, il le réutilisera alors:

fetch(url, {
  credentials: 'include',
}).then(...);

Un exemple simple de copier-coller dans la console Chrome:

fetch('https://example.com/path', {method:'GET', 
headers: {'Authorization': 'Basic ' + btoa('login:password')}})
.then(response => response.json())
.then(json => console.log(json));

LES UTILISATEURS DE NOEUDS (REACT, EXPRESS) SUIVENT CES ÉTAPES

1. npm install base-64 --save
2. import { encode } from "base-64";

3.  const response = await fetch(URL, {
     method: 'post',
     headers: new Headers({
       'Authorization': 'Basic ' + encode(username + ":" + password),
       'Content-Type': 'application/json'
     }),
     body: JSON.stringify({
       "PassengerMobile": "xxxxxxxxxxxx",
       "Password": "xxxxxxx"
     })
   });
   const posts = await response.json();
   

4. N'oubliez pas de définir toute cette fonction comme async

Je partagerai un code qui a un corps de demande de données de formulaire d'en-tête d'authentification de base,

let username = 'test-name';
let password = 'EbQZB37gbS2yEsfs';
let formdata = new FormData();
let headers = new Headers();


formdata.append('grant_type','password');
formdata.append('username','testname');
formdata.append('password','qawsedrf');

headers.append('Authorization', 'Basic ' + base64.encode(username + ":" + password));
fetch('https://www.example.com/token.php', {
 method: 'POST',
 headers: headers,
 body: formdata
}).then((response) => response.json())
.then((responseJson) => {
 console.log(responseJson);

 this.setState({
    data: responseJson
 })
  })
   .catch((error) => {
 console.error(error);
   });

Ce n'est pas directement lié au problème initial, mais cela aidera probablement quelqu'un.

J'ai rencontré le même problème en essayant d'envoyer une demande similaire à l'aide d'un compte de domaine. Le problème de la mienne n'était donc pas un caractère échappé dans le nom de connexion.

Mauvais exemple:

'ABC\username'

Bon exemple:

'ABC\\username'