401 Error when calling api with Javascript

API Issues
#1

Hi there, I have tried reading every search result about this error but haven’t been able to get any response from the API. If anyone could help, I would be most grateful:

var compprofile = 'https://api.companieshouse.gov.uk/company/';
var company = '00048839'; // barclays bank
var url = compprofile + company;
var key = 'xxxxxxxxxxx-yyyyyyyy-zzzzzzzzzz:';  //removed but have been using trailing colon
            
var headers = new Headers ({
  'Authorization': 'Basic ' + btoa(key),
  'Content-Type': 'text/json'
});
var obj = {
  mode: 'no-cors',
  method: 'GET',
  headers: headers
};
fetch(url, obj)
.then((resp) => resp.json())
.then(data => console.log(data))
.then(function(res) {
  return res.json();
})
.then(function(res) {
  console.log(res);
})
.catch(function(err) {
  console.log(err);
});
#2

When I encode a-streaming-api-key: I get an encoded string with only 1 equals ‘=’ sign at the end, yet the example has 2. If you get a single equals after encoding your API key, can you add the extra equals sign then try accessing the endpoint ('Authorization' : 'Basic ' + btoa(key) + '=', ...)
If that works, then someone from CH needs to take another look at the basic authentication guide.

#3

Thanks for your response! Unfortunately that doesn’t seem to have worked although I do see the encoded string now only has 1x = sign on the end.

#4

May be a red herring with the equals.
Just looked at how I got this to work with php and what stuck out was I had to loop the response text until I got an end to a complete data chunk. Before getting there, though, you need to at least have a successful connection. Try this:

var compprofile = 'https://api.companieshouse.gov.uk/company/';
var company = '00048839';
var url = compprofile + company;
var key = 'xxxxxxxxxxx-yyyyyyyy-zzzzzzzzzz:';

var headers = new Headers({
  'Authorization': 'Basic ' + btoa(key),
  'Content-Type': 'text/json'
});
var obj = {
  mode: 'no-cors',
  method: 'GET',
  headers: headers
};

async function subscribe() {
  let response = await fetch(url, obj);

  if (response.status == 502) {
    await subscribe();
  } else if (response.status != 200) {
    console.log('Error: ' + response.statusText);
    // Reconnect in one second
    await new Promise(resolve => setTimeout(resolve, 1000));
    await subscribe();
  } else {
  //you may need to loop here
    let message = await response.text();
    console.log(message);
    await subscribe();
  }
}

subscribe();

PS. Why do you have a no-cors mode?

EDIT:

async function chsData(url = '', key='') {
  const response = await fetch(url, {
    method: 'GET',
    headers: {
      'Authorization': 'Basic ' + btoa(key);
    }
  });
  return response.json(); // parses JSON response into native JavaScript objects
}
var key = 'xxxxxxxxxxx-yyyyyyyy-zzzzzzzzzz:';
chsData('https://api.companieshouse.gov.uk/company/00048839', key).then(data => {
  console.log(data);
});
#5

Same 401 error unfortunately… Without the no-cors I seem to be getting a CORS error.

#6

When I run this in jsfiddle.net

async function chsData(url = '', key = '') {
  const response = await fetch(url, {
    method: 'GET',
    headers: {
      'Authorization': 'Basic ' + btoa(key)
    }
  });
  return response.json(); // parses JSON response into native JavaScript objects
}
var key = 'xxxxxxxxxxx-yyyyyyyy-zzzzzzzzzz:';
chsData('https://api.companieshouse.gov.uk/company/00048839', key).then(data => {
  console.log(data);
});

I get this in the console:

{
error: “Invalid Authorization”,
type: “ch:service”
}

Which is expected as the key is definitely not right.