Can't get this AngularJs HTTP request to work? - angularjs

Question

I'm trying to use the $http service in a angularJS app but I'm getting the below error in my console.
XMLHttpRequest cannot load http://example.com/data.service/getSomething/hghfg7igb757. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://other-example.dev' is therefore not allowed access.
This is my AngularJS Controller:
app.controller('mainController', ['$scope', '$http', function($scope, $http){
var url = 'http://example.com/data.service/getSomething/hghfg7igb757';
$http({
method: 'GET',
cache: true,
url: url,
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
}).
success(function(status) {
//your code when success
$scope.data = data;
}).
error(function(status) {
//your code when fails
});
}]);
I've read this may have something to do with my server configuration, I'm using gulp-connect https://www.npmjs.com/package/gulp-connect. Or is it to do with the server config of the site I'm requesting from?
UPDATE
I checked the http headers with curl but it doesn't seem to tell me much?
$ curl -I http://example.com/data.service/getSomething/hghfg7igb757
HTTP/1.1 200 OK
Date: Wed, 07 Dec 2016 22:35:19 GMT
Server: WildFly/8
Expires: Wed, 07 Dec 2016 22:40:19 GMT
X-Powered-By: Undertow/1
X-dmg-elapsed-time: 30ms
X-dmg-host-address: 17?.??.???.?0
X-dmg-generated-time: Wed, 07 Dec 2016 22:35:19 GMT
Content-Type: application/json;charset=UTF-8
Content-Language: en-
X-dmg-node-name: dbfr_node_1
Vary: Accept-Encoding
X-Varnish-Bereq-Backend: real_backend_llr
X-Varnish-Bereq-Retries: 0
Last-Modified: Wed, 07 Dec 2016 22:35:19 GMT
Cache-Control: public, max-age=300
X-Varnish: 1376270
Age: 0
Via: 1.1 varnish-v4
X-Varnish-Cache: MISS
X-Varnish-Served-By-Host: jul.max.ie
X-Varnish-Served-By-IP: 1?.???.??.??
X-Varnish-Pool: http_pages
X-Varnish-Req-Backend-Hint: dead
X-Varnish-Req-Restarts: 0
X-Varnish-Hash: /data.service/getSomething/hghfg7igb757
X-Varnish-Backend-Ourself: varnish_server_jul_llr
X-DMG-Version: 6.20.51.2358
Accept-Ranges: none
Connection: keep-alive

Answer 1

How can I enable CORS with gulp-connect?
install cors package:
npm install --save-dev cors
then add it as middleware to connect:
var gulp = require('gulp');
var connect = require('gulp-connect');
var cors = require('cors');
gulp.task('connect', function() {
connect.server({
root: 'app',
middleware: function() {
return [cors()];
}
});
});
-- https://github.com/AveVlad/gulp-connect/issues/100#issuecomment-74369427
how can I check the headers in the response?
$http(...).
then(function onSuccess(response) {
// Handle success
var data = response.data;
var status = response.status;
var statusText = response.statusText;
var headers = response.headers;
var config = response.config;
...
console.log(headers());
}).
catch(function onError(response) {
// Handle error
var data = response.data;
var status = response.status;
var statusText = response.statusText;
var headers = response.headers;
var config = response.config;
...
console.log(headers());
});
$http's deprecated custom callback methods - success() and error() - have been removed. You can use the standard then()/catch() promise methods instead, but note that the method signatures and return values are different.
-- AngularJS Developer Guide - Migrating from 1.5 to 1.6 - $http

Answer 2

This turned out to be a CORs issue on the server side