'BAD REQUEST' When calling API using Fetch method in JavaScript

Question

I'm trying to return some data from an API using the Fetch method, but I'm getting a 400 error. I'm probably missing something obvious, but I've been at this for so long I probably can't see the wood for the trees.

<script type="text/javascript">
function getJSON() {
    const API = 'https://API-URL-ENDPOINT';
    const QUERY = 'sample-query';
    const A_KEY = '{API Key}';
    const A_SEC = '{API Secret}';

    let headers = new Headers();
    headers.append('Authorization', 'Basic ' + USERNAME + ":" + PASSWORD);

    {/* Fetch Method Here */}
      fetch(API, {method: 'GET', headers: headers })
      .then(response => response.json())
      .then(json => console.log(json));
      }

      function parseJSON(response) {
          return response.json()
          }
</script>

If anyone can offer any hints, that would be great.

Shilly · Accepted Answer · 2018-11-20 16:14:25Z

1

As written in the docs for the Authorization header, you need to encode it in base64.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Authorization

So try headers.append('Authorization', 'Basic ' + btoa( USERNAME + ":" + PASSWORD ));

edited Nov 20, 2018 at 16:14

answered Nov 20, 2018 at 16:04

Shilly

8,5991 gold badge21 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shilly Over a year ago

Thanks, fixed. Typos can even sneak into Basic questions if you're in a hurry. ;)

Collectives™ on Stack Overflow

'BAD REQUEST' When calling API using Fetch method in JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related