javascript - consume - Autenticación básica con fetch?

preload css

Question

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é le pasa al 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()
}

Answer 1

Compartiré un código que tiene el cuerpo de solicitud de datos del formulario 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);
   });

Answer 2

Le falta un espacio entre Basic y el nombre de usuario y contraseña codificados.

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

Answer 3

Si tiene un servidor de fondo 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(...);

Answer 4

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

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

Answer 5

Una solución sin dependencias.

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

Answer 6

LOS USUARIOS DE NODO (REACT, EXPRESS) SIGUEN 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 olvides definir toda esta función como async