Basisauthentifizierung mit Abruf?

Ich möchte eine einfache Basisauthentifizierung mit Fetch schreiben, erhalte aber immer wieder einen 401-Fehler. Es wäre großartig, wenn mir jemand sagen würde, was mit dem Code nicht stimmt:

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

Es fehlt ein Leerzeichen zwischen Basicund dem verschlüsselten Benutzernamen und Passwort.

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

Eine Lösung ohne Abhängigkeiten.

Knoten

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

Browser

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

Sie können auch btoa anstelle von base64.encode () verwenden.

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

Wenn Sie einen Back-End-Server haben, der vor der App nach den Anmeldeinformationen für die Basisauthentifizierung fragt, ist dies ausreichend. Er verwendet diese dann wieder:

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

Ein einfaches Beispiel für das Einfügen in die Chrome-Konsole:

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

NODE USERS (REACT, EXPRESS) FOLGEN SIE DIESEN SCHRITTEN

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. Vergessen Sie nicht, diese ganze Funktion als zu definieren async

Ich werde einen Code freigeben, der den Datenanforderungshauptteil des Basisauthentifizierungskopfs enthält.

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

Dies hängt nicht direkt mit dem ursprünglichen Problem zusammen, wird aber wahrscheinlich jemandem helfen.

Ich hatte das gleiche Problem, als ich versuchte, eine ähnliche Anfrage über ein Domänenkonto zu senden. Mein Problem war also ein nicht maskiertes Zeichen im Anmeldenamen.

Schlechtes Beispiel:

'ABC\username'

Gutes Beispiel:

'ABC\\username'