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, Mar 07 '16 at 17:40
@migg sorry, just put in the error. I'm getting the "No-Access-Control-Allow-Origin" header is present — seanscal, Mar 07 '16 at 17:56
It stating that Server side CORS is not accepting from Local Host Test with this Access-Control-Allow-Origin: http://localhost:3000. the thing is you already gave * to accept all domains .. but Give a try with this syntax. — Prasad, Mar 07 '16 at 18:09
http://stackoverflow.com/questions/18642828/origin-http-localhost3000-is-not-allowed-by-access-control-allow-origin , http://stackoverflow.com/questions/32338596/access-control-allow-origin-error-but-request-goes-through this posts will give you Good Info @ CORS i Hope — Prasad, Mar 07 '16 at 18:10
When I see this correct, you are requesting the domain `nhlwc.cdnak.neulion.com` directly from your angular app (client). This does not work if the domain does not send the CORS header. You have to request the domain from your node server for this to work. — crackmigg, Mar 07 '16 at 18:13
@N.V.Prasad my main problem is I don't really know where to add the headers in my project rather than knowing what I need to add — seanscal, Mar 07 '16 at 18:15
The URL in get call is attaching to wrong domain.... and you have set headers on wrong URL i.e localhost:3000 ...... — damitj07, Mar 07 '16 at 18:20
Check this [answer](http://stackoverflow.com/questions/35661190/csrf-token-missing-or-incorrect-django-angularjs/35730321#35730321) — Shankar Gurav, Mar 07 '16 at 18:23
You have put the right headers Sir... But point is you are not calling onto the URL you have configured. — damitj07, Mar 07 '16 at 18:46
@ Damit07 can you post your answer and explanation where i can up vote you please ? — Prasad, Mar 07 '16 at 18:51

score 2 · Accepted Answer · answered Mar 07 '16 at 19:07

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.

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? — seanscal, Mar 07 '16 at 19:19
well, that sucks. guess I'll have to find a workaround... thanks for all the help anyway! — seanscal, Mar 07 '16 at 20:05

Prasad · Answer 2 · 2016-03-07T18:48:40.083

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 07 '16 at 18:48

answered Mar 07 '16 at 18:36

Prasad

1,562
5
26
40

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 – seanscal Mar 07 '16 at 18:39
there i added res.header("Access-Control-Allow-Origin", "http://localhost:3000"); have you seen that ? – Prasad Mar 07 '16 at 18:43
yeah, i copied this exact code in place of what I had in the server.js – seanscal Mar 07 '16 at 18:44
ok let me update My Answer... but pls Update your post with the error content – Prasad Mar 07 '16 at 18:45

Javascript and angularjs using CORS

2 Answers2