2017-04-17 158 views
4

我有一个关键字值对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请求或任何其他方法的方法吗?

我已经通过了答案建议在:

然而,我无法弄清楚什么是需要。

回答

0

在你的配置这些头添加到您的节点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); 
+0

感谢您的回答。但添加这些标头并没有帮助。另外,因为我们正在触及不在我们的服务器上的终点(我们正在让api接听电话)。我不明白如何添加这些标头改变任何东西?因为根据我的理解,我们的app.js只是呈现html页面,如果我们从我们托管的页面获得响应,这会有所帮助。 – kamini

0

首先注入httpProvider,然后在您的app.js

$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8'; 

下面一行它会像一个魅力。

+0

感谢您的回复。对不起,天真的问题,但不知道如何注入httpProvider在配置? – kamini

+0

angular.module('myApp').config(['$ httpProvider',function($ httpProvider)]) –

+0

嘿,这并没有解决问题!感谢您的答复。 – kamini

0

您可以在此之后,你不会需要添加/你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等。

+0

感谢您的回复。方法1不起作用,它仍然显示相同的错误。方法2是我想逃避问题中提到的。 – kamini

+0

方法1对我来说工作正常你有安装它第一'npm安装cors --save' – warl0ck

+0

如果它仍然无法正常工作,请检查更新的method2,其中你手动追加标题,这也应该工作正常。 – warl0ck

0

外部API需要提及哪些来源可以调用API。如果您的域名未在外部API中定义,则无法访问该API。这是安全功能。解决这个问题的唯一方法是让你的外部API提供者允许你的主机名。

这可以使用'Access-Control-Allow-Origin'头来完成。您的外部API必须发送一个标题,其中'Access-Control-Allow-Origin'为关键字,您的主机名称为值。没有其他的方法可以绕过这个。

+0

我们正在调用外部api而不是由我们处理! – kamini