使用 CORS 的 Javascript 和 angularjs

Posted 2023-02-27

【中文标题】使用 CORS 的 Javascript 和 angularjs

【英文标题】：Javascript and angularjs using CORS

【发布时间】：2016-06-21 09:18:18

【问题描述】：

我正在尝试使用 $http 从站点获取信息，老实说，我已经查看了所有内容并尝试了很多不同的东西，但我不确定如何设置“Access-Control-Allow”的标题-起源'。我不确定我是否只是完全误解了或其他什么，但任何帮助都非常感谢，提前非常感谢！

XMLHttpRequest 无法加载 http://nhlwc.cdnak.neulion.com/fs1/nhl/league/teamroster/NJD/iphone/clubroster.json。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，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"
            );
    
)();

【问题讨论】：

问题出在哪里？

res.header('Access-Control-Allow-Methods', 'OPTIONS,GET,POST,PUT,DELETE'); res.header("Access-Control-Allow-Headers", "Content-Type, Authorization, X-Requested-With");如果它们引发 CORS 错误，则启用 CRUD 操作

问题是什么，您面临的问题在哪里？

get 调用中的 URL 附加到错误的域....并且您在错误的 URL 上设置了标题，即 localhost:3000 ......

您已经放置了正确的标头先生...但关键是您没有调用您配置的 URL。

【参考方案1】：

我不知道这是否是你编码问题的答案，但让我在这里澄清几件事。

这里有这段代码

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:3000 开始的任何其他 URL 发出的任何请求都可以从此服务器（*在您的网络中）。

---

从上面的代码可以说，你得到的 CORS 错误不是因为你上面提到的 GET API 调用......而是来自其他一些访问托管在 @ 的服务器的代码987654322@.

另外我建议你改变

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

以上改动保持了功能不变，也更容易理解。

【讨论】：

所以如果我理解正确，我将无法仅通过使用 cors 和 http.get 来使用该站点获取信息？我无法编辑权限以允许它在 json 文件的服务器端发生，对吗？

不，你不能。除非你有足够的权限

好吧，这很糟糕。我想我必须找到一个解决方法......无论如何感谢所有的帮助！

【参考方案2】：

您需要在服务器 (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 场景处理包。

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

【讨论】：

如果我只是应该在 server.js 中替换它，这不起作用，我得到了同样的错误。这就是我一直在努力解决的问题

我添加了 res.header("Access-Control-Allow-Origin", "localhost:3000"); 你看到了吗？

是的，我复制了这个确切的代码来代替我在 server.js 中的代码

好的，让我更新我的答案...但是请使用错误内容更新您的帖子