Can't get this AngularJs HTTP request to work?

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

Seems like [CORS](https://www.html5rocks.com/en/tutorials/cors/) issue — Pankaj Parkar, Dec 07 '16 at 15:55
@PankajParkar, how can I resolve a CORS issue? Does the server I'm requesting from need to implement something? — Holly, Dec 07 '16 at 15:57
Add this to the response header: `Access-Control-Allow-Origin: *`. — Rui Brito, Dec 07 '16 at 16:04
@RuiBrito, does that need to be added on the server we're recieving the info from, i.e. *http://example.com/data.service/getSomething/hghfg7igb757* — Holly, Dec 07 '16 at 17:00
Yes, you add it to the server's response. You can read more about it [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) — Rui Brito, Dec 07 '16 at 17:04
Which is the expected response? I try the same request with Postman and the response data is an html not a json. — aUXcoder, Dec 07 '16 at 19:21
@aUXcoder, it's JSON in the response. The URL I gave in the question is just an example as the real one is private. — Holly, Dec 07 '16 at 19:50
Possible duplicate of ["No 'Access-Control-Allow-Origin' header is present on the requested resource"](http://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource) — georgeawg, Dec 08 '16 at 08:00

georgeawg · Answer 1 · 2016-12-07T21:32:08.047

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

edited Dec 07 '16 at 21:32

answered Dec 07 '16 at 18:46

georgeawg

48,608
13
72
95

Check the headers in the response. – georgeawg Dec 07 '16 at 20:52
how can I check the headers in the response? In the chrome console? – Holly Dec 07 '16 at 21:15
when I check the headers I get `ncaught TypeError: Cannot read property 'headers' of null(…)`, perhaps this is the issue? – Holly Dec 07 '16 at 22:18
Read [How to Debug Small Programs](https://ericlippert.com/2014/03/05/how-to-debug-small-programs/) – georgeawg Dec 07 '16 at 22:25
actually `response.headers` is just null because `response` is, as the `XMLHttpRequest` failed – Holly Dec 07 '16 at 22:28
@georgewg, I was able to get the `headers` with curl but they don't see to tell me much. I updated my question with the `header` info – Holly Dec 07 '16 at 22:52

score 0 · Accepted Answer · answered Dec 16 '16 at 09:58

0

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

answered Dec 16 '16 at 09:58

Holly

7,462
23
86
140

Can't get this AngularJs HTTP request to work?

UPDATE

2 Answers2

How can I enable CORS with gulp-connect?