¿Autenticación básica con recuperación?

Quiero escribir una autenticación básica simple con fetch, pero sigo recibiendo un error 401. Sería increíble si alguien me dijera qué está mal con el código:

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()
}

Falta un espacio entre Basicel nombre de usuario y la contraseña codificados.

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

Una solución sin dependencias.

Nodo

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

Navegador

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

También puede usar btoa en lugar de base64.encode ().

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

Si tiene un servidor de backend que solicita las credenciales de autenticación básica antes de la aplicación, entonces esto es suficiente, lo reutilizará entonces:

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

Un ejemplo sencillo de copiar y pegar en la consola de Chrome:

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

USUARIOS DE NODO (REACCIONAR, EXPRESAR) SIGAN ESTOS PASOS

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. No olvide definir toda esta función como async

Compartiré un código que tiene un cuerpo de solicitud de datos de formulario de encabezado de autenticación básica,

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);
   });

Esto no está directamente relacionado con el problema inicial, pero probablemente ayudará a alguien.

Enfrenté el mismo problema cuando intentaba enviar una solicitud similar usando una cuenta de dominio. Entonces, el problema mío no fue el carácter de escape en el nombre de inicio de sesión.

Mal ejemplo:

'ABC\username'

Buen ejemplo:

'ABC\\username'