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"
            });
    }
})();

res.header('Access-Control-Allow-Methods', 'OPTIONS,GET,POST,PUT,DELETE'); res.header("Access-Control-Allow-Headers", "Content-Type, Authorization, X-Requested-With"); This one Enables CRUD operation if they are Raising CORS Errors — Prasad
– Prasad, Commented Mar 7, 2016 at 17:40
The URL in get call is attaching to wrong domain.... and you have set headers on wrong URL i.e localhost:3000 ...... — damitj07
– damitj07, Commented Mar 7, 2016 at 18:20
You have put the right headers Sir... But point is you are not calling onto the URL you have configured. — damitj07
– damitj07, Commented Mar 7, 2016 at 18:46

damitj07 · Accepted Answer · 2016-03-07 19:07:33Z

2

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.

answered Mar 7, 2016 at 19:07

damitj07

2,9291 gold badge23 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

seanscal Over a year ago

so if i'm understanding correctly, I won't be able to use this site for info just by using cors and the http.get? I can't edit the permissions to allow it to happen on the server side for the json file, correct?

damitj07 Over a year ago

No you cant.unless you have sufficient privileges

seanscal Over a year ago

well, that sucks. guess I'll have to find a workaround... thanks for all the help anyway!

Prasad · Accepted Answer · 2016-03-07 18:48:40Z

1

You need to enable CORS on the server (localhost:3000). Check out this site: http://enable-cors.org/

server Side CORS block of your app:

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();
});

Refer and Install http://npmjs.com/package/cors a Good Package for CORS Scenario Handling.

you can check the commented posts for some users experience and answers .

edited Mar 7, 2016 at 18:48

answered Mar 7, 2016 at 18:36

Prasad

1,6005 gold badges27 silver badges42 bronze badges

4 Comments

seanscal Over a year ago

if I'm just supposed to replace this in server.js, this did not work, I'm getting the same error. That's what I've been trying to do for the mostpart trying to get this fixed

Prasad Over a year ago

there i added res.header("Access-Control-Allow-Origin", "localhost:3000"); have you seen that ?

seanscal Over a year ago

yeah, i copied this exact code in place of what I had in the server.js

Prasad Over a year ago

ok let me update My Answer... but pls Update your post with the error content

Collectives™ on Stack Overflow

Javascript and angularjs using CORS

2 Answers 2

3 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related