I'm currently in the process of developing a straightforward app using Angular that will interact with my API. To test the code, I'm utilizing a virtual machine and accessing it on my computer. When calling the API from my local machine, I can use cURL or any other HTTP client, and everything functions smoothly. For instance:
curl -k --user [email protected]:password
This example would retrieve a list of travelers. Since the certificate is invalid, I had to "trust" it. Initially, when making the call from the browser, I encountered a net::ERR_INSECURE_RESPONSE error. However, after adding an exception for the API URL, the issue no longer persists. Additionally, basic authentication was required, which appears to be functioning correctly. Take a look at my code below and let me know if you notice any errors. I'm following a tutorial that involves consuming an external API: http://www.example.com/angular-tutorial
app.js:
angular.module('TravelApp', [
'TravelApp.controllers',
'TravelApp.services'
]);
services.js:
angular.module('TravelApp.services', [])
.factory('TravelAPIService', function($http) {
var travelAPI = {};
$http.defaults.headers.common.Authorization = 'Basic ABC743HFEd...=';
travelAPI.getTravelers = function() {
return $http({
method: 'GET',
url: 'https://api.my.domain.com/v1/traveler/get'
});
}
return travelAPI;
});
Finally, controllers.js:
angular.module('TravelApp.controllers', [])
.controller('travelersController', function($scope, TravelAPIService) {
$scope.travelersList = [];
TravelAPIService.getTravelers()
.success(function(data) {
console.log('SUCCESS');
$scope.travelersList = data;
})
.error(function(data, status) {
console.log('ERROR');
$scope.data = data || "Request failed";
$scope.status = status;
});
});
The error status code is 0, and the error data returns an empty string.