Angularjs GET api Response for preflight has invalid HTTP status code 405

I am newbie of Angularjs and I am trying to send a GET call to query an API. Here is the API website:http://dataportal.unistats.ac.uk/Pages/ApiDocumentation. This API uses HTTP Basic Auth. The access token and the password should be contained in the header for authentication, but I received an error: Response for preflight has invalid HTTP status code 405.

Error sreenshot

I tried to use methods found on stack overflow, but I failed. Could anyone help me with this problem? Many thanks!

university.js

angular.module('clientApp')
.config(function ($httpProvider) {
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
    $httpProvider.defaults.headers.post['Accept'] = 'application/json, text/javascript';
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8';
    $httpProvider.defaults.headers.post['Access-Control-Max-Age'] = '1728000';
    $httpProvider.defaults.headers.common['Access-Control-Max-Age'] = '1728000';
    $httpProvider.defaults.headers.common['Accept'] = 'application/json, text/javascript';
    $httpProvider.defaults.headers.common['Content-Type'] = 'application/json; charset=utf-8';
    $httpProvider.defaults.useXDomain = true;


})
.factory('Base64', function () {
    var keyStr = 'ABCDEFGHIJKLMNOP' +
        'QRSTUVWXYZabcdef' +
        'ghijklmnopqrstuv' +
        'wxyz0123456789+/' +
        '=';
    return {
        encode: function (input) {
            var output = "";
            var chr1, chr2, chr3 = "";
            var enc1, enc2, enc3, enc4 = "";
            var i = 0;

            do {
                chr1 = input.charCodeAt(i++);
                chr2 = input.charCodeAt(i++);
                chr3 = input.charCodeAt(i++);

                enc1 = chr1 >> 2;
                enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
                enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
                enc4 = chr3 & 63;

                if (isNaN(chr2)) {
                    enc3 = enc4 = 64;
                } else if (isNaN(chr3)) {
                    enc4 = 64;
                }

                output = output +
                    keyStr.charAt(enc1) +
                    keyStr.charAt(enc2) +
                    keyStr.charAt(enc3) +
                    keyStr.charAt(enc4);
                chr1 = chr2 = chr3 = "";
                enc1 = enc2 = enc3 = enc4 = "";
            } while (i < input.length);

            return output;
        },

        decode: function (input) {
            var output = "";
            var chr1, chr2, chr3 = "";
            var enc1, enc2, enc3, enc4 = "";
            var i = 0;

            // remove all characters that are not A-Z, a-z, 0-9, +, /, or =
            var base64test = /[^A-Za-z0-9\+\/\=]/g;
            if (base64test.exec(input)) {
                alert("There were invalid base64 characters in the input text.\n" +
                    "Valid base64 characters are A-Z, a-z, 0-9, '+', '/',and '='\n" +
                    "Expect errors in decoding.");
            }
            input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");

            do {
                enc1 = keyStr.indexOf(input.charAt(i++));
                enc2 = keyStr.indexOf(input.charAt(i++));
                enc3 = keyStr.indexOf(input.charAt(i++));
                enc4 = keyStr.indexOf(input.charAt(i++));

                chr1 = (enc1 << 2) | (enc2 >> 4);
                chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
                chr3 = ((enc3 & 3) << 6) | enc4;

                output = output + String.fromCharCode(chr1);

                if (enc3 != 64) {
                    output = output + String.fromCharCode(chr2);
                }
                if (enc4 != 64) {
                    output = output + String.fromCharCode(chr3);
                }

                chr1 = chr2 = chr3 = "";
                enc1 = enc2 = enc3 = enc4 = "";

            } while (i < input.length);

            return output;
        }
    };
}).controller('UniversityCtrl', function ($scope, $http, Base64) {

    //        $http.defaults.headers.common = {
    //            "Access-Control-Request-Headers": "accept, origin, authorization"
    //        };//you probably don't need this line.  This lets me connect to my server on a different domain
    $http.defaults.useXDomain = true;
    $http.defaults.headers.common['Authorization'] = 'Basic ' + Base64.encode('QY24UB2HCMHH4940GGWG' + ':' + 'test');
    $scope.$watch('search', function () {
        fetch();
    });
    $scope.search = "10000291";

    function fetch() {
        $.getJSON({
            url: 'https://data.unistats.ac.uk/api/v3/KIS/Institution/' + $scope.search
            , headers: {
                'Accept': 'application/json, text/javascript'
                , 'Content-Type': 'application/json; charset=utf-8'
            }

        }).
        success(function (data, status, headers, config) {
            $scope.search = data;
            //console.log(search);
            // this callback will be called asynchronously
            // when the response is available
        }).
        error(function (data, status, headers, config) {
            alert(data);
            // called asynchronously if an error occurs
            // or server returns response with an error status.
        })
    };

});

university.html

<div class="input-group search-bar">
<input type="text" ng-model="search" ng-model-options="{ debounce: 800 }" onclick="select()" class="form-control" placeholder="Enter a univeristy name" autofocus />
<span class="input-group-addon bar-style"><i class="glyphicon glyphicon-search"></i></span>

Update

I tried to use POST instead of GET, but there is still the same error. It seems that this API can only be queried using GET.