Angular js - 跨域请求在GET请求中被阻止
我有一个关键字值对URL列表,我正在使用名为accessUrl
的函数访问它们。我们点击的网址是外部网址,而不是由我们维护,即我无法更改从那些网址向我们发送回应的服务器代码。Angular js - 跨域请求在GET请求中被阻止
http.get()
成功时给我状态和响应。
var accessUrl = function(){
$.each(url, function(key, value)
{
$http.get(value).success(function(response,status){
$scope.status=status;
if($scope.status == "200"){
versionMap[key]=response.version;
setColor[key]='color-green';
//console.log("map "+versionMap[key]);
}
})//end of success
.error(function(err){
versionMap[key]="Down";
setColor[key]='color-red';
})//end of error
})//end of each loop
}//end of accessUrl
我想提出一个交叉原点请求。目前我已将CORS扩展添加到Chrome。
我app.js:
var express = require("express");
var app = express();
var path = require("path");
app.use("/", express.static(__dirname));
app.get('/',function(req,res){
res.sendFile(path.join(__dirname+'/index.htm'));
//__dirname : It will resolve to your project folder.
});
app.set('port', process.env.PORT);
console.log(port);
我不想再使用CORS扩展。如果没有扩展我遇到了以下错误:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://myurl.com (Reason: CORS header 'Access-Control-Allow-Origin' missing).
是否有通过它我们可以写在角代码,使CORS请求或任何其他方法的方法吗?
我已经通过了答案建议在:
然而,我无法弄清楚什么是需要。
在你的配置这些头添加到您的节点JS服务器
var express = require("express");
var app = express();
var path = require("path");
app.use("/", express.static(__dirname));
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/index.htm'));
//__dirname : It will resolve to your project folder.
});
app.use(function(req, res, next) {
// Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', '*');
// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
res.setHeader('Access-Control-Allow-Credentials', true);
// Pass to next layer of middleware
next();
});
app.set('port', process.env.PORT);
console.log(port);
首先注入httpProvider,然后在您的app.js
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
下面一行它会像一个魅力。
您可以在此之后,你不会需要添加/你GET/POST
请求发送任何特殊标头只添加这两条线在你的文件中使用cors
库在您的服务器: 方法1:
var cors = require('cors');
app.use(cors());
在安装后使用NPM:
npm install cors --save
方法2:
如果你不想使用额外的库,你可以在你的服务器文件手动添加标题为:
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Methods', 'DELETE, PUT', 'GET', 'POST');
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
方法3:
如果你不想编辑您的服务器在开发过程中你可以使用这个完美的工作来完成这个工作。 P.S:您可能必须将其禁用才能访问其他网站,例如Google/youtube等。
外部API需要提及哪些来源可以调用API。如果您的域名未在外部API中定义,则无法访问该API。这是安全功能。解决这个问题的唯一方法是让你的外部API提供者允许你的主机名。
这可以使用'Access-Control-Allow-Origin'头来完成。您的外部API必须发送一个标题,其中'Access-Control-Allow-Origin'为关键字,您的主机名称为值。没有其他的方法可以绕过这个。
我们正在调用外部api而不是由我们处理! – kamini
感谢您的回答。但添加这些标头并没有帮助。另外,因为我们正在触及不在我们的服务器上的终点(我们正在让api接听电话)。我不明白如何添加这些标头改变任何东西?因为根据我的理解,我们的app.js只是呈现html页面,如果我们从我们托管的页面获得响应,这会有所帮助。 – kamini