Wrong Error Code in Angular.js $resource responce

Question

I have a function that lists the databases attached to a SQL server by making an API call.

function dbList(resource, args, scope, server){
    // Recieves a list of DBs from the API and adds it to the scope
    scope.loadingResponse = true;

    resource('http://localhost:1000/apiv1/servers/:server/databases',
        {server: server}).get(args).$promise.then(function (result) {
        scope.databases = result.databases;
        scope.loadingResponse = false;
    }, function(error){
            console.log(JSON.stringify(error));
            errorHandler(scope, error)
        })
}

It is called from my controller like:

dbList($resource, args, $scope, 'SERVER1');

It passes any errors it encounters to my error handler, which evaluates them:

function errorHandler(scope, error){
    // Displays the error message and ends the loading animation
    var err_code = error.status;
    var err_message = 'Error Code ' + error.status + ': ';
    console.log(JSON.stringify(error))
    if (err_code == 401){
        err_message += 'Unauthorized. Cookie expired or nonexistent.';
    }
    else if (err_code == 400) {
        err_message += 'Missing parameter. Ensure all necessary fields are filled'
    }
    else if (err_code == 404) {
        err_message += 'Resource not found. Ensure that it exists.'
    }
    else if (err_code == 405) {
        err_message += 'Method not allowed. This could be caused by XHR Cross Domain Option requests.'
    }
    else if (err_code == 409) {
        err_message += 'The Resource you wish to use is in use. Ensure that there is no name conflict with an attached database.'
    }

    scope.loadingResponse = false;
    scope.error = err_message;
}

I'm making a call to the API without submitting the token I have to verify with, and am getting a 401 Error according to the Firefox console. This is the expected behavior when the API is access without the token. So I expected $scope.error to be set to Error Code 401: Unauthorized. Cookie expired or nonexistent.

However, what I am getting is Error Code 404: Resource not found. Ensure that it exists.

The Firefox console reads:

[13:39:20.419] GET http://localhost:1000/apiv1/servers? [HTTP/1.0 401 UNAUTHORIZED 5ms]
[13:39:20.413] "{"data":"","status":404,"config":{"transformRequest":[null],"transformResponse":[null],"method":"GET","url":"http://localhost:1000/apiv1/servers","params":{},"headers":{}}}"

How and why has angular.js transformed my 401 into a 404, and how can I access the correct status code?

ETA: The problem turned out to be a cross-domain request issue caused by the Flask API I was using to run things from. See my answer below

Answer 1

The answer turns out to be a problem with the back end, which was done in Flask. A decorator was used to correctly set up Access-Control-Allow-Origin headers. Unfortunately, the decorator doesn't apply to errors that are done using the abort() function. The way around this is to use this decorator, and set things up like this:

if verify(req):
    do stuff ...
else:
    return jsonify({'error': 401}), 401

If the error is set up as a json return with an error code, the decorator will reach it.