javascript - Autenticación básica con fetch?

Quiero escribir una autenticación básica simple con fetch, pero sigo recibiendo un error 401. Sería genial si alguien me dice 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();

Respuesta #1

Una solución sin dependencias.

Nodo

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

Navegador

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

Respuesta #2

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

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

Respuesta #3

En JavaScript puro también puedes usar btoa en lugar de base64.encode():

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

Tenga en cuenta que esto solo funcionará con caracteres ASCII.

Si tienes que manejar diferentes codificaciones, consulta la documentación enlazada de btoa.

Respuesta #4

Un ejemplo simple para 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));

o con await:

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

Respuesta #5

Si tienes un servidor backend que solicita las credenciales de Autenticación Básica antes que la aplicación, entonces esto es suficiente, se reutilizará eso luego:

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

Respuesta #6

USUARIOS DE NODE (REACT, EXPRESS) SIGAN ESTOS PASOS

```
npm install base-64 --save
```
```
import { encode } from "base-64";
```

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

No olvides definir toda esta función como async