Javascript and angularjs using CORS

Question

I'm attempting to GET information from a site using $http, and I've honestly looked all over and tried tons of different things but I'm not sure exactly how to set the headers for 'Access-Control-Allow-Origin'. I'm not sure if I'm just misunderstanding completely or something, but any help is really appreciated, thanks a ton in advance!

XMLHttpRequest cannot load http://nhlwc.cdnak.neulion.com/fs1/nhl/league/teamroster/NJD/iphone/clubroster.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 503.

Here is my code:

relavant code from rosterService:

(function(){
    'use strict';

var URL = 'http://nhlwc.cdnak.neulion.com/fs1/nhl/league/teamroster/NJD/iphone/clubroster.json';

angular
    .module("DevilsFanApp")
    .factory("RosterService", RosterService);

function RosterService($rootScope, $http) {
    function fetchPlayers(callback){
        return $http({
            method: 'GET',
            url: URL,
            dataType: 'jsonp'
        });
    }
    }
})();

server.js:

    var express = require('express');
var app = express();

var ipaddress = process.env.OPENSHIFT_NODEJS_IP || '127.0.0.1';
var port = process.env.OPENSHIFT_NODEJS_PORT || 3000;


app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "http://localhost:3000"); // instead of * give a try with 
    res.header('Access-Control-Allow-Methods', 'OPTIONS,GET,POST,PUT,DELETE');  
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

app.use(express.static(__dirname + '/public'));

app.listen(port, ipaddress);

config.js:

(function(){
    angular
        .module("DevilsFanApp")
        .config(Configure);

    function Configure($routeProvider,$httpProvider) {
        $routeProvider
            .when("/roster",{
                templateUrl: "./views/roster/roster.view.html",
                controller: "RosterController"
            })
            .otherwise({
                redirectTo: "/home"
            });
    }
})();

Answer 1

I dont know if this is answer for your coding question , But Let me clear few things here .

This code you have here

var URL = 'http://nhlwc.cdnak.neulion.com/fs1/nhl/league/teamroster/NJD/iphone/clubroster.json';

angular
.module("DevilsFanApp")
.factory("RosterService", RosterService);

function RosterService($rootScope, $http) {
function fetchPlayers(callback){
    return $http({
        method: 'GET',
        url: URL,
        dataType: 'jsonp'
    });
}
} 

It will make a get call to url located at "http://nhlwc.cdnak.neulion.com/fs1/nhl/league/teamroster/NJD/iphone/clubroster.json" which is a hosted domain server and It may have a CORS configured or it may not.

And basically you cannot do anything from UI side to access the data from above URL ,unless until you have right permission or a way to configure CORS at this Server from backend.

---

Now the second piece of code you have :

var express = require('express');
var app = express();

var ipaddress = process.env.OPENSHIFT_NODEJS_IP || '127.0.0.1';
var port = process.env.OPENSHIFT_NODEJS_PORT || 3000;

app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers",
"Origin, X-Requested-With,       Content-Type, Accept");
next();
 }); 
app.use(express.static(__dirname + '/public'));
app.listen(port, ipaddress);`

Above is your local nodejs server which is running locally (port : 3000) on your network . Here you have configured the CORS and any requests made to this URL or any other URL starting from localhost:3000 or 127.0.0.1:3000 will be able to access the data from this server (*within your network).

---

From above code it can be said that ,the error of CORS which you are getting is not because of the GET API call you have mentioned above...but from some other piece of code which is accessing the server hosted at http://localhost:30000.

Also I would suggest you to change the

app.listen(port, ipaddress);
//to
app.listen(3000);

The above change keeps the functionality intact ,and is simpler to understand as well.