Basic authentication with fetch?

javascript fetch-api
daniel.lozynski picture daniel.lozynski · May 8, 2017 · Viewed 117.9k times · Source

I want to write a simple basic authentication with fetch, but I keep getting a 401 error. It would be awesome if someone tells me what's wrong with the 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()
}

Answer

Lukasz Wiktor picture Lukasz Wiktor · May 8, 2017

You are missing a space between Basic and the encoded username and password. 

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

Related questions

No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API

I'm trying to fetch some data from the REST API of HP Alm. It works pretty well with a small curl script - I get my data. Now doing that with JavaScript, fetch and ES6 (more or less) seems to …

Read More
Fetch: POST json data

I'm trying to POST a JSON object using fetch. From what I can understand, I need to attach a stringified object to the body of the request, e.g.: fetch("/echo/json/", { headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, method: "…

Read More
Trying to use fetch and pass in mode: no-cors

I can hit this endpoint, http://catfacts-api.appspot.com/api/facts?number=99 via Postman and it returns JSON Additionally I am using create-react-app and would like to avoid setting up any server config. In my client code I am trying …

Read More