Angular2 -跨域请求被阻止

Question

我试图使用我的angular2应用程序的预测API。然而，当我试图访问API时，我得到一个跨原点错误。任何想法我怎么能解决这个错误?

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头'Access-Control-Allow-Origin'丢失).

更新现在使用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: "JSONP注入的脚本没有调用…"，状态:200,ok: true, statusText: " ok "，标头:对象，类型:3,url: "https://api.forecast。io/预测/60…"}0. def29191127bbc3e0100.hot-update.js: 61:10SyntaxError:期望的表达式，得到'==='

Answer 1

用于预报。因此，应该使用JSONP。使用jQuery最简单的方法是将?callback=?添加到请求URL:

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

我不是Angular 2的专家，但从文档中可以看出，你需要导入json，然后添加一个回调。这里有更多的文档——参见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上的代码

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

像下面这样(从上面)

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'。

当你使用上述概念时，它将完美地工作。

希望这篇文章对你有帮助

谢谢