Ionic 2/Angular 2/CORS:HTTP头没有被请求发送
问题描述:
我正在使用Ionic 2(2.0.0-beta.10)的项目。我尝试将请求传递给授权令牌。但是头没有被发送。我试图传递的其他标题也没有被发送。Ionic 2/Angular 2/CORS:HTTP头没有被请求发送
let url = 'http://www.example.com/savedata';
let data = JSON.stringify({ email: '[email protected]', password: '123456' });
let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Authorization', 'Bearer ' + "tokenContent");
let options = new RequestOptions({ headers: headers });
this.http.post(url, data, options).map(res => res.json()).subscribe(data => {
console.log("it worked");
}, error => {
console.log("Oooops!");
});
我的REST API接收到这个请求,有以下标题:
Host: www.example.com
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://evil.com/
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36
Access-Control-Request-Headers: authorization, content-type
Accept: */*
Referer: http://localhost:8100/?restart=794567
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8
的数据(体)进来正确的,只是标题问题,我解决不了。 任何帮助将不胜感激。
答
如果您在调用与您的Angular 2/Ionic应用程序(例如evil.com)不同的域中的REST API(您的示例中是example.com),则需要将REST API服务器配置为返回这个头:
Access-Control-Allow-Origin: http://evil.com
,这将使浏览器从主机evil.com发送异步HTTP请求到REST API服务器。
这是通过启用其余api服务器上的CORS来完成的,您可以多读一下它。
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
的后端几个库,从而实现跨起源请求:
https://github.com/expressjs/cors - 的NodeJS /快速
https://pypi.python.org/pypi/Flask-Cors/ - Python的CORS库瓶
和列表持续近任何其他后端框架。
答
将JSON这个字符串化并非真的在任何时候工作。 首先,您需要将您的JSON数据转换为StringQuery,以便通过服务器以更快的方式正确理解。
public StringQuery(jsonString) {
return Object.keys(jsonString).map(function (key) {
return encodeURIComponent(key) + '=' + encodeURIComponent(jsonString[key]);
}).join('&');
}
然后你让你的文章函数或方法
public post(){
let url = 'http://www.example.com/savedata';
let data = this.StringQuery({ email: '[email protected]', password: '123456' })
let headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded');
headers.append('Authorization', 'Bearer ' + "tokenContent");
let options = new RequestOptions({ headers: headers });
this.http.post(url, data, options).map(res => res.json()).subscribe(data => {
console.log("it worked");
}, error => {
console.log("Oooops!");
});
}
我使用此代码太并获得成功后请求。
你可以尝试传递这样的'this.http.post(url,data,{headers:headers})这样的头文件....' – AngJobs
我试图做到这一点,但是我在REST API中收到的头文件发送请求如下:主机\t \t www.example.com连接 \t保活\t 的Content-Length \t \t 45原产 \t \t http://evil.com/ 用户代理\t的Mozilla/5.0( Windows NT 6.1; WOW64)AppleWebKit/537.36(KHTML,如Gecko)Chrome/51.0.2704.106 Safari/537.36 \t Content-Type \t text/plain \t Accept \t */* \t Referer \t http:// localhost:8100 /?重启= 794567 \t 接受编码gzip的\t,缩小\t 接受语言\t EN-US,EN; Q = 0.8 – GwenTiana
正常,检查这个答案http://*.com/questions/38301878/ionic-2-angular -2-http-headers-are-not-being-along-with-the-request – AngJobs