Angular2 -跨域请求被阻止
我正尝试在我的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:预期表达式，已获取'===‘
回答 3
Stack Overflow用户
发布于 2016-08-28 07: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]);Stack Overflow用户
发布于 2016-08-28 07: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]);Stack Overflow用户
发布于 2017-06-08 00: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");因此，在Access-Control-Allow-Headers中，你必须传递从前端发送的所有头部：'Authorization'，'Content-type‘和'Access-Control-Allow-Origin’。
当你使用上面的概念时，它将会完美的工作。
希望这篇文章能对你有所帮助。
谢谢
https://stackoverflow.com/questions/39186578
复制相似问题
腾讯云开发者
