Javascript 和 angularjs 使用 CORS

Question

我正在尝试使用 $http 从站点获取信息，老实说，我已经全面查看并尝试了很多不同的东西，但我不确定如何为 headers 设置 headers 'Access-Control-Allow-Origin'。我不确定我是完全误解了还是什么，但非常感谢任何帮助，提前致谢！

XMLHttpRequest 无法加载 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' 因此不允许访问。响应具有 HTTP 状态代码 503。

这是我的代码：

来自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

您需要在服务器 (localhost:3000) 上启用 CORS。查看此站点：http://enable-cors.org/

服务器端 CORS 您的应用程序块：

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

参考并安装http://npmjs.com/package/cors一个很好的CORS场景处理包。

您可以查看评论帖子以获取一些用户体验和答案。

Answer 2

我不知道这是否是您编码问题的答案，但让我在这里澄清一些事情。

你这里有这个代码

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

它将调用位于“http://nhlwc.cdnak.neulion.com/fs1/nhl/league/teamroster/NJD/iphone/clubroster.json”的 url，这是一个托管域服务器，它可能配置了 CORS，也可能没有配置。

而且基本上你不能从 UI 端做任何事情来从 URL 上面访问数据，除非你有正确的权限或从后端在此服务器上配置 CORS 的方法。

现在你有了第二段代码：

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);`

以上是您的本地 nodejs 服务器，它是运行本地（端口：3000）在您的网络上。在这里，您已经配置了 CORS 以及对此 URL 或从 localhost:3000 或 127.0.0.1 开始的任何其他 URL 发出的任何请求： 3000 将能够从此服务器（*在您的网络内）访问数据。

从上面的代码可以说，你得到的 CORS 错误不是因为你上面提到的 GET API 调用......而是来自其他一些代码访问托管在 http://localhost:30000.

的服务器

此外，我建议您更改

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

以上更改保持了功能的完整性，并且也更易于理解。

Javascript 和 angularjs 使用 CORS

Javascript and angularjs using CORS

javascript

node.js

http-status-code-503

express

angularjs