(Aula 9) Mostrar mensagem de erro na requisição Ajax

Ao finalizar o curso, um problema está me incomodando. A requisição é feita sem problemas e os pacientes são adicionados a tabela sem erros, porém ao forçar o erro na requisição alterando a URL, como descrito na parte final da aula 9, a mensagem não tem a classe "invisivel" removida e, sendo assim, não é exibida. Ao invés disso tenho as seguintes mensagens no console:

buscar-pacientes.js:23 GET https://aspi-pacientes.herokuapp.com/pacientes 404 (Not Found)
(anonymous) @ buscar-pacientes.js:23
index.html:1 Failed to load https://aspi-pacientes.herokuapp.com/pacientes: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 404.

'busca-pacientes.js':

var botaoAdicionar = document.querySelector("#buscar-pacientes");

botaoAdicionar.addEventListener("click", function(){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://api-pacientes.herokuapp.com/pacientes");

    xhr.addEventListener("load", function(){
        var erroAjax = document.querySelector("#erro-ajax");

        if(xhr.status == 200){
            erroAjax.classList.add("invisivel");

            var pacientes = JSON.parse(xhr.responseText);

            pacientes.forEach(function(paciente){
                adicionaPacienteNaTabela(paciente);
            });
        }else{
            erroAjax.classList.remove("invisivel");
        }        
    });

    xhr.send();
});

Aparentemente o erro acontece, como esperado, mas a parte do código dentro do 'else', que remove a classe do 'span', não é executada, por que?

P.S:O mesmo acontece com o código disponibilizado pelo professor no fim do curso.

(Navegador: Google Chrome Versão 66.0.3359.181 (Versão oficial) 64 bits)