Javascript and angularjs using CORS
Javascript and angularjs using CORS
我正在尝试使用$http从站点获取信息,老实说,我已经查看了所有内容并尝试了大量不同的东西,但我不确定如何为"访问控制-允许-来源"设置标题。 我不确定我是否只是完全误解了还是什么,但任何帮助真的很感激,提前非常感谢!
XMLHttpRequest 无法加载 http://nhlwc.cdnak.neulion.com/fs1/nhl/league/teamroster/NJD/iphone/clubroster.json。请求的资源上不存在"访问控制允许源"标头。因此,不允许访问源"http://localhost:3000"。响应具有 HTTP 状态代码 503。
这是我的代码:
来自名册服务的相关代码:
(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'
});
}
}
})();
服务器.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);
配置.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"
});
}
})();
这是否是你编码问题的答案,但是让我在这里澄清几件事。
你在这里有的这个代码
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 进行 get 调用,该网址是托管域服务器,它可能配置了 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 调用......而是来自访问托管在 http://localhost:30000 的服务器的其他一些代码。
另外,我建议您更改
app.listen(port, ipaddress);
//to
app.listen(3000);
上述更改保持了功能的完整,并且也更易于理解。
您需要在服务器上启用 CORS (localhost:3000)。查看此网站: 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 方案处理的良好包。
您可以查看评论的帖子以获取一些用户体验和答案。
- 如何通过引用var Using DataTables来进行分页或排序
- CORS-重定向到第二个GET正在接收的页面
- node.js请求数据事件未在CORS ajax调用中触发
- 带有凭据的角度文件上载(CORS)不起作用
- 与域在同一台计算机上运行的NODEJS服务器的CORS错误
- SmartGWT数据源和CORS
- CORS-服务器端cookie没有保存在chrome浏览器上
- CORS:否'访问控制允许来源'header-但是php设置头文件
- Object.prototype using 'this'
- CORS:访问控制允许原点不等于提供的原点
- using LocalStorage ionic 2
- CORS保持在SecurityError上:操作不安全
- jQuery Replacing, Using arrays
- 绘制(重新加载)具有cors=“”的图像;匿名的“;在画布上(javascript)
- CORS故障无法解决jquery,laravel5.2
- Using jQuery with classes from ES6
- Dropdownlist using javascript
- 在Golang回调函数中启用CORS
- 向localhost发出带有grunt的代理CORS请求
- Javascript and angularjs using CORS