We Keep Coding

AngularJS and Basic HTTP Auth

I have an Angular app that is accessing a test database. This has worked before, but over the weekend I'm no longer allowed access. I have made no changes to the Angular code. Here's the issue.
For me to access the test database, I have to pass in the username and password since the database is using Basic HTTP Auth. My resource ends up looking like this.
angular.module("CoolApp.misc")
.factory('Ad', ad)
ad.$inject = ['$resource'];
function ad($resource) {
return $resource('http://username:password#build.com/api/advertisement.json');
}
Now when I run
Ad.get({}, function(resp) {}, function(badresp) {console.log(badresp)})
the console spits out the badresp object. I look inside my config headers section and notice this as the url...
url: "http://username#build.com/api/advertisement.json"
Wait a minute, I set the password in as the url. Why is the header not supplying me the password? Is that why I'm receiving a No 'Access-Control-Allow-Origin' header is present on the requested resource. in my console?
For kicks here is my http config
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";
}
My question is, what's wrong with this and how do I fix it?

No 'Access-Control-Allow-Origin' header is present on the requested resource. If you say you haven't changed the front-end code since the last time you touched it, then that can only mean that something on the server changed... Based on the error you've provided, it seems like a pretty clear case of somebody either removing the Access-Control-Allow-Origin on the server, or limiting the origins.
You can't change that on the client; that has to change on the server.

Angular Cross-Origin Request CORS failure, but node http.get() returns successfully

I am trying to access an API using AngularJS. I have checked the API functionality with the following node code. This rules out that the fault lies with
var http = require("http");
url = 'http://www.asterank.com/api/kepler?query={"PER":{"$lt":1.02595675,"$gt":0.67125}}&limit=10';
var request = http.get(url, function (response) {
var buffer = ""
response.on("data", function (chunk) {
buffer += chunk;
});
response.on("end", function (err) {
console.log(buffer);
console.log("\n");
});
});
I run my angular app with node http-server, with the following arguments
"start": "http-server --cors -a localhost -p 8000 -c-1"
And my angular controller looks as follows
app.controller('Request', function($scope, $http){
// functional URL = http://www.w3schools.com/website/Customers_JSON.php
$scope.test = "functional";
$scope.get = function(){
$http.get('http://www.asterank.com/api/kepler?query={"PER":{"$lt":1.02595675,"$gt":0.67125}}&limit=10',{
params: {
headers: {
//'Access-Control-Allow-Origin': '*'
'Access-Control-Request-Headers' : 'access-control-allow-origin'
}
}
})
.success(function(result) {
console.log("Success", result);
$scope.result = result;
}).error(function() {
console.log("error");
});
// the above is sending a GET request rather than an OPTIONS request
};
});
The controller can parse the w3schools URL, but it consistently returns the CORS error when passed the asterank URL.
My app avails of other remedies suggested for CORS on this site (below).
Inspecting the GET requests through Firefox shows that the headers are not being added to the GET request. But beyond that I do not know how to remedy this. Help appreciated for someone learning their way through Angular.
I have tried using $http.jsonp(). The GET request executes successfully (over the network) but the angular method returns the .error() function.
var app = angular.module('sliderDemoApp', ['ngSlider', 'ngResource']);
.config(function($httpProvider) {
//Enable cross domain calls
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
});

You should understand one simple thing: even though those http modules look somewhat similar, they are totally different beasts in regards to CORS.
Actually, the node.js http.get() has nothing to do with CORS. It's your server that makes a request - in the same way as your browser does when you type this URL in its location bar and command to open it. The user agents are different, yes, but the process in general is the same: a client accesses a page lying on an external server.
Now note the difference with angular's $http.get(): a client opens a page that runs a script, and this script attempts to access a page lying on an external server. In other words, this request runs in the context of another page - lying within its own domain. And unless this domain is allowed by the external server to access it in the client code, it's just not possible - that's the point of CORS, after all.
There are different workarounds: JSONP - which basically means wrapping the response into a function call - is one possible way. But it has the same key point as, well, the other workarounds - it's the external server that should allow this form of communication. Otherwise your request for JSONP is just ignored: server sends back a regular JSON, which causes an error when trying to process it as a function call.
The bottom line: unless the external server's willing to cooperate on that matter, you won't be able to use its data in your client-side application - unless you pass this data via your server (which will act like a proxy).

Asterank now allows cross origin requests to their API. You don't need to worry about these workarounds posted above any more. A simple $http.get(http://www.asterank.com/api/kepler?query={"PER":{"$lt":1.02595675,"$gt":0.67125}}&limit=10')
will work now. No headers required.I emailed them about this issue last week and they responded and configured their server to allow all origin requests.
Exact email response from Asterank : "I just enabled CORS for Asterank (ie Access-Control-Allow-Origin *). Hope this helps!"

I was having a similar issue with CORS yesterday, I worked around it using a form, hopefully this helps.
.config(function($httpProvider){
delete $httpProvider.defaults.headers.common['X-Requested-With'];
$httpProvider.defaults.headers.common = {};
$httpProvider.defaults.headers.post = {};
$httpProvider.defaults.headers.put = {};
$httpProvider.defaults.headers.patch = {};
})
.controller('FormCtrl', function ($scope, $http) {
$scope.data = {
q: "test"//,
// z: "xxx"
};
$scope.submitForm = function () {
var filters = $scope.data;
var queryString ='';
for (i in filters){
queryString=queryString + i+"=" + filters[i] + "&";
}
$http.defaults.useXDomain = true;
var getData = {
method: 'GET',
url: 'https://YOUSEARCHDOMAIN/2013-01-01/search?' + queryString,
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
};
console.log("posting data....");
$http(getData).success(function(data, status, headers, config) {
console.log(data);
}).error(function(data, status, headers, config) {
});
}
})
<div ng-controller="FormCtrl">
<form ng-submit="submitForm()">
First names: <input type="text" name="form.firstname">
Email Address: <input type="text" ng-model="form.emailaddress">
<button>bmyutton</button>
</form>
</div>
Seems to work with the url you posted above as well..
ObjectA: 0.017DEC: 50.2413KMAG: 10.961KOI: 72.01MSTAR: 1.03PER: 0.8374903RA: 19.04529ROW: 31RPLANET: 1.38RSTAR: 1T0: 64.57439TPLANET: 1903TSTAR: 5627UPER: 0.0000015UT0: 0.00026
I should also add that in chrome you need the CORS plugin. I didn't dig into the issue quite as indepth as I should for angular. I found a base html can get around these CORS restrictions, this is just a work around until I have more time to understand the issue.

After lots of looking around. The best local solution I found for this is the npm module CORS-anywhere. Used it to create AngularJS AWS Cloudsearch Demo.

Trying to get basic authentication work in angularJS

I have a RESTful back-end server enabling the basic authentication. I would like to implement a GET request in my angularJS file to get some data from the server.
Code:
angular.module('MyApp', [])
.controller('MyCtrl',function ($scope, $http) {
var userheader= btoa('username' + ':' + 'userpassword');
$scope.getData= function (){
var req = {
method: 'GET',
url: 'https://localhost:8000/data/',
headers: { 'Authorization': 'Basic ' + userheader }
};
$http(req)
.success(function(data) {
$scope.mydata = data;
}).error(function(){
throw new Error('Somthing went wrong');
});
};
});
When I invoked the function 'getData()', it always give me the error "No 'Access-Control-Allow-Origin' header is present on the requested resources".

Your REST server needs to support CORS requests in order to respond to client-generated requests.
Which framework is your server built with?

It is usually a bad idea (security wise) to use HTTP Basic authentication, even over TLS, in untrusted client applications (JS or mobile). Any reason you're not using Token Authentication for Single Page Applications ?

Get JSON from PHP url within AngularJS factory

I have a AngularJS factory that has a method to get JSON from either a file on disk or from an URL.
The file approach is working okay. When I change it to use the remote URL, it isn't working. In Firefox it doesn't show me much information. I only get a warning about CORS or something? This is my code from the factory:
(function () {
var releasingFactory = function ($http) {
var factory = {};
factory.getCars = function(callback){
//return $http.get('/wagenplan/releasing.json');
return $http.get('http://www.athloncarlease.com/webservice/releasing.php').success(callback);
}
return factory;
};
releasingFactory.$inject = ['$http'];
angular.module('releasingApp').factory('releasingFactory', releasingFactory);
}());
I'm not sure if this will work.
The warning from FF Firebug is:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://www.athloncarlease.com/webservice/releasing.php. This can be fixed by moving the resource to the same domain or enabling CORS.
Any idea's?

I have read the article on Wikipedia about Same-origin policy. Perhaps you should skip "www." in the location string to be aligned with the rule: "same protocol, host and port".

AngularJS API call error with $http GET

I'm trying to create a simple app using Angular that will consume my API. I'm using a VM to run the code, and I access it on my computer, so to call the API from my machine I can use cURL or any other HTTP client and everything works. An example:
curl -k --user damien#email.com:password https://api.my.domain.com/v1/traveler/get
And that would return a list of travelers for example. I need to "trust" the certificate as it is not valid. So on the browser at first the call would return net::ERR_INSECURE_RESPONSE, so I'm just going to the API URL and add the exception and now I don't have this issue anymore. Then I had to add basic authentication, and it seems to work. Let's see what is my code and please let me know if you see anything wrong, I'm following this tutorial that consume an external API: http://www.toptal.com/angular-js/a-step-by-step-guide-to-your-first-angularjs-app
app.js:
angular.module('TravelerApp', [
'TravelerApp.controllers',
'TravelerApp.services'
]);
services.js:
angular.module('TravelerApp.services', [])
.factory('TravelerAPIService', function($http) {
var travelerAPI = {};
$http.defaults.headers.common.Authorization = 'Basic ABC743HFEd...=';
travelerAPI.getTravelers = function() {
return $http({
method: 'GET',
url: 'https://api.my.domain.com/v1/traveler/get'
});
}
return travelerAPI;
});
Finally, the controllers.js:
angular.module('TravelerApp.controllers', [])
.controller('travelersController', function($scope, TravelerAPIService) {
$scope.travelersList = [];
TravelerAPIService.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 is an empty string.

Precisions:
I have the same behavior with an HTTP POST query.
I am sure :
no request have been made on the server
it's angular that don't sent the query
And finally I find the answer:
Since I (and probably you) are sending on a self signed httpS server. Chrome flag it as none safe.
I fix this issue by putting the address on my browser and manually accept the certificate.
Probably related : XMLHttpRequest to a HTTPS URL with a self-signed certificate

I would suggest to use Trusted CA Signed SSL Certificate rather then Self-Signed Certificates which would solve your problem as most browsers do not accept the self signed certificates like Google Chrome,Firefox,etc.