Authorization in HTTP hearder does not work

I am trying to consume my web services using Knoutout.js . My API needs an HTTP header so that clients can access, otherwise it throws a 403 error (forbidden).

With the Advanced REST Client when accessing the API URL, it works by providing the Authorization header, but by executing the JavaScript code in the browser with said header continues throwing a 403.

Any ideas on how to provide the credentials to access my API?

function logInViewModel() {
  var self = this;

  self.email= ko.observable();
  self.password = ko.observable();

  logIn = function() {
    $.ajax({
      type:"POST",
      url : "http://127.0.0.1:8000/login/",
      contentType: "application/json",
      //accepts: "application/json",
      //cache: false
      dataType : "json",
      data : JSON.stringify({"email" : self.email() , "password" : self.password() } ),
      beforeSend: function (xhr) {
                    xhr.setRequestHeader("Authorization", 
                        "Basic " + btoa("[email protected]"+ ":" + "12345678m"));
                },
      error: function(jqXHR) {
                    console.log("ajax error " + jqXHR.status);
                }

    });   

  }

}

var logInVM = new logInViewModel();
ko.applyBindings(logInVM);

Thanks!