首页 文章

Angular2 - 阻止跨源请求

提问于
浏览 次
0

我正在尝试将forecast API与我的angular2应用程序一起使用 . 但是，当我尝试访问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头'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 Object {_body："JSONP injected script did not invok…"，status：200，ok：true，statusText："Ok"，headers：Object，type：3，url：“https://api.forecast.io/forecast/60 ...”} 0.def29191127bbc3e0100 . hot-update.js：61：10语法错误：期望表达式，得到'==='

javascript angular get cross-domain

3 回答

  • 0

    查看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]);
    回复于
  • 0

    对于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]);
    回复于
  • 0

    您遇到此问题是因为您发送的标头与后端中的标头不匹配 .

    假设您发送以下标头：

    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 这样的 Headers 应该与后端允许的 Headers 相匹配 .

    所以在后端 Access-Control-Allow-Headers 应该有以上所有 Headers ：

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

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

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

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

    谢谢

    回复于

相关问题