I am currently facing an issue with my Angular app that is unable to access a test database. Strangely, this problem started over the weekend without any changes made to the Angular code. Here's what I'm experiencing.
In order to access the test database, I need to provide a username and password due to Basic HTTP Auth. This results in my resource URL looking like this.
angular.module("CoolApp.misc")
.factory('Ad', ad)
ad.$inject = ['$resource'];
function ad($resource) {
return $resource('http://username:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a7a6b79797d65786e4a687f636e6564616674686461">[email protected]</a>/api/advertisement.json');
}
When I try to run
Ad.get({}, function(resp) {}, function(badresp) {console.log(badresp)})I receive the badresp object in the console. Upon checking the config headers section, I notice the URL looks like...
url: "http://<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ea9f998f98848b878faa889f838085808fa884868580"><span class="__cf_email__" data-cf-email="18796779676c70696a61687a307d7173">[email protected]</span></a>/api/advertisement.json"
Why is the header not passing the password if I included it in the URL? Could this be why I am seeing a
No 'Access-Control-Allow-Origin' header is present on the requested resource.Just for reference, here is my http configuration
angular.module("CoolApp")
.config(config);
config.$inject = ["$httpProvider"];
function config($httpProvider) {
$httpProvider.defaults.useXDomain = true;
//$httpProvider.defaults.withCredentials = true;
delete $httpProvider.defaults.headers.common["X-Requested-With"];
$httpProvider.defaults.headers.common["Accept"] = "application/json";
$httpProvider.defaults.headers.common["Content-Type"] = "application/json";
}
In conclusion, I would like to know what could be causing this issue and how I can resolve it.