fetch json data using angular.js

Simple node HTTP server is hosting JSON data on localhost/6666.

Another HTTP server is setup to serve very basic angular.js application made of single index.html file and module which purpose is to fetch data:

app.controller('ctrl', function ($scope, $http) {
    method: 'GET',
    url: 'localhost:6666/'
  }).then(function (res) {
    $scope.dt = res.data

Using developer tools in my browser I was able to read error log from the console, that looks like this:

Possibly unhandled rejection: {“data”:null,”status”:-1,”config”:{“method”:”GET”,”transformRequest”:[null],”transformResponse”:[null],”jsonpCallbackParam”:”callback”,”url”:”localhost:6666/”,”headers”:{“Accept”:”application/json, text/plain, /“}},”statusText”:””,”xhrStatus”:”error”}

Perhaps this is because angular is asking for resources that are cross-origin, or maybe it has something to do with the way that resources are served.
When I search for localhost:6666 (where data is served), I see only JSON string that is served using the following code:

http.createServer(function(req, res) {
    res.writeHead(200, {
         "Content-Type": "application/json",
         'Access-Control-Allow-Origin': '*',
         'Access-Control-Allow-Methods': 'OPTIONS, POST, GET',
         'Access-Control-Max-Age': 24000,

Where “data” is ordinary javascript object.

Source: AngularJS

Related Post