Question

我尝试在我的angular2应用中使用forecast API。但是，当我尝试访问API时，我得到了一个Cross-Origin错误。知道如何解决这个错误吗？

search(latitude: any, longitude: any){
        console.log(latitude); 
        console.log(longitude);
        let body = 'https://api.forecast.io/forecast/APIKEY/'+latitude+','+longitude ; 
        console.log(body); 
        this.http.get(body)
            .map(
                response => response.json()
            ).subscribe(
                data =>  console.log("Data: "+data),
                err =>  console.log("Error: "+err),
                () => console.log('Get Complete')
            );
    }

错误

阻止跨源请求：同源策略禁止在https://api.forecast.io/forecast/APIKEY/37.8267,-122.423读取远程资源。（原因：CORS标题＆＃39; Access-Control-Allow-Origin＆＃39;缺失）。

更新现在使用JSONP

    let body = 'https://api.forecast.io/forecast/APIKEY/'+latitude+','+longitude + '?callback=?' ; 
    console.log(body); 
    this.jsonp.get(body)
    .map(response => response.json())
    .subscribe(
            data =>  console.log("Data: "+data),
            err =>  console.log("Error: "+err),
            () => console.log('Get Complete')
    );

错误

Error0.def29191127bbc3e0100.hot-update.js：59：10 对象{_body：＆＃34; JSONP注入脚本没有调用...＆＃34;，状态：200，ok：true，statusText：＆＃34; Ok＆＃34;，headers：Object，type：3，url：＆＃34; https://api.forecast.io/forecast/60 ...＆＃34; } 0.def29191127bbc3e0100.hot-update.js：61：10 SyntaxError：期望表达式，得到＆＃39; ===＆＃39;

Answer 1

对于forecast.io，您应该使用JSONP。使用jQuery执行此操作的最简单方法是将?callback=?添加到请求URL：

$.getJSON('https://api.forecast.io/forecast/<API KEY>/' + latitude + ',' + longitude + "?callback=?", function(data) {
   console.log(data);
});

我不是Angular 2的专家，但是阅读文档看起来你需要导入Jsonp然后添加一个回调。更多文档here - 请参阅app/wiki/wikipedia.service.ts。

部分

我觉得下面的代码会对你有用

let body = "https://api.forecast.io/forecast/<API KEY>/' + latitude + ',' + longitude + '?callback=?'";
return this.jsonp
           .get(body)
           .map(response => <string[]> response.json()[1]);

Answer 2

查看angular.io

上的cors位

https://angular.io/docs/ts/latest/guide/server-communication.html#!#cors

如下所示（来自上方）

return this.jsonp
           .get(wikiUrl, { search: params })
           .map(response => <string[]> response.json()[1]);

Answer 3

您遇到此问题，因为您发送的标头与后端的标头不匹配。

假设您发送以下标题：

contentHeaders = new Headers();
contentHeaders.append('Authorization', 'Your token used in app'); 
contentHeaders.append('Content-Type', 'application/json'); 
contentHeaders.append('Access-Control-Allow-Origin', '*');

因此，Authorization，Content-type和Access-Control-Allow-Origin等标题应与后端允许的标题相匹配。

因此，在后端Access-Control-Allow-Headers应该包含以上所有标题：

res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Authorization, content-type, Access-Control-Allow-Origin");

所以在Access-Control-Allow-Headers这里你必须传递从前端发送的所有标题：'Authorization'，'Content-type'和'Access-Control-Allow-Origin'。

当您使用上述概念时，它将完美运作。

希望这篇文章对你有所帮助

由于

Angular2 - 阻止跨源请求

3 个答案: