[SOLVED] Cannot load data from Kinvey database

Cannot load data from Kinvey database

I have created a database in Kinvey and I am trying to load the data with a onclick event on a button. I tried to console.log my response from the promise to see if I will get the object back, but instead of an object it gives me this error:

error: "The Authorization header in your request is malformed. An Authorization header should contain two parts separated by a space: a type (Basic or Kinvey) and a base64-encoded auth string.

What is wrong with my GET request and why does it return this error, since I already have an Authorization header?

here is my html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Blog</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<h1>All Posts</h1>
<button id="btnLoadPosts" onclick="attachEvents()">Load Posts</button>
<select id="posts"></select>
<button id="btnViewPost">View</button>
<h1 id="post-title">Post Details</h1>
<ul id="post-body"></ul>
<h2>Comments</h2>
<ul id="post-comments"></ul>
<script src="./blog.js"></script>
</body>
</html>

and my JavaScript:

function attachEvents() {
    const URL = 'https://baas.kinvey.com/appdata/kid_Sy8W2Z0Y7';
    const USERNAME = 'Peter';
    const PASSWORD = 'p';
    const BASE_64 = btoa(USERNAME + ':' + PASSWORD);
    const AUTH = {"Authorization" : 'Basic' + BASE_64};

    $('#btnLoadPosts').on('click', loadPosts);

    function loadPosts() {
        $.ajax({
            method: 'GET',
            url: URL + 'posts',
            headers: AUTH
        }).then(function(response) {
            cosole.log(response);
        }).catch(function(error) {
            console.log(error);
        })
    }
}

Solution

Did you forget to add a space after Basic in the authorization header?