问Angular2 -跨域请求被阻止
EN

Stack Overflow用户

提问于 2016-08-27 23:04:40

回答 3查看 6.4K关注 0票数 0

我正尝试在我的angular2应用程序中使用forecast应用程序接口。但是，当我尝试访问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注入脚本未调用…“，status: 200，ok: true，statusText："Ok"，headers: Object，type: 3，url："https://api.forecast.io/forecast/60…“}0.def29191127bbc3e0100.hot-update.js:61:10 SyntaxError:预期表达式，已获取'===‘

javascript

angular

get

cross-domain

人脸识别特惠活动

精准实时的人脸检测、分析、识别等服务，在线、离线满足多样需求，可应用于智慧零售、智慧社区、在线娱乐等多种应用场景

回答 3

Stack Overflow用户

发布于 2016-08-27 23:07:12

对于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

Stack Overflow用户

发布于 2016-08-27 23:14:53

查看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

Stack Overflow用户

发布于 2017-06-07 16:15:24

你遇到这个问题是因为你发送的报头与后端的报头不匹配。

假设您发送以下报头：

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");