Angular2 -跨域请求被阻止
Angular2 - Cross-Origin Request Blocked
我试图使用我的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:期望的表达式,得到'==='
用于预报。因此,应该使用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]);
查看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]);
你得到这个问题是因为你发送的头不匹配后端头
假设您发送以下头:
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中使用jQuery插件
- 不能从angular2中的子组件指定父组件中的数组
- ajax请求的顺序总是不同的
- Meteor如何接收HTTP请求
- 有没有一种方法可以防止img get请求使用css或js发生
- 从ajax请求中获取javascript对象
- JSONP请求返回结果,但也触发error_callback
- 在localhost Dev Box上测试JSONP请求的最佳方式
- Ajax请求文档就绪会导致jquery加载缓慢
- MockJax没有在JavaScript应用程序中发送对我AJAX请求的响应
- 正在传递JSONP标头's数据参数到另一个文件中的AJAX请求
- 在openshift node js应用程序中获取请求
- 将所有angular2捆绑包包含在index.html中会使导入从内存获取数据,而不是再次从服务器请求数据
- 如何根据使用Angular2发出的post请求的响应来呈现输出
- Angular2 发布请求未向服务器发送正确的数据
- 在 Angular2 中构建多部分/表单数据 POST 请求并验证输入类型文件
- Angular2:动态同步http请求
- Angular2 Http 请求返回没有映射方法的可观察性
- Angular2:同步两个post请求
- Angular2 -跨域请求被阻止