![](/img/trans.png)
[英]Ionic 2 - Angular 2 http Headers are not being sent along with the request
[英]Ionic 2 / Angular 2 / CORS: HTTP Headers not being sent with request
我正在使用Ionic 2(2.0.0-beta.10)开展一个项目。 我尝试通过请求传递授权令牌。 但是没有发送标头。 我试图传递的其他标头也没有被发送。
let url = 'http://www.example.com/savedata';
let data = JSON.stringify({ email: 'test@test.com', 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
数据(正文)是正确的,只有我无法解决的标题问题。 任何帮助将非常感激。
这个问题的答案如下: https : //stackoverflow.com/a/45286959/4119650
Headers.append()
不更新对象,它返回它的一个克隆。 通过实例化Headers对象然后调用headers.append()
,不会使用该append
的结果。 相反,您可能需要这样做:
headers: Headers = new Headers().append('Content-Type', 'application/json').append('Authorization', 'Bearer ' + "tokenContent");
无论如何都会弃用标Headers
,应该用HttpHeaders
和HttpClient
替换。 https://angular.io/api/common/http/HttpHeaders https://angular.io/guide/http
尝试使用HttpClient 。 这是最简单和最新的一个。
constructor(private http: HttpClient) {}
...
...
postData() {
const httpHeaders = new HttpHeaders({
'Content-Type' : 'application/json',
'Cache-Control': 'no-cache',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Credentials': 'true',
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS, PUT, DELETE',
'Access-Control-Allow-Headers': 'Origin, Accept, Access-Control-Allow-Origin, Content-Type, Authorization, X-Requested-With'
});
let url = 'http://www.example.com/savedata';
let data = JSON.stringify({ email: 'test@test.com', password: '123456' });
this.http.post(url, data, { headers: httpHeaders, observe: 'response'}).subscribe(data => {
console.log("it worked");
}, error => {
console.log("Oooops!");
}); // Here you don't need to use map().
}
如果您正在调用与您的Angular 2 / Ionic应用程序(在您的示例中为evil.com)不同的域上的REST API(示例中为example.com),则需要配置REST API服务器以返回此标头:
Access-Control-Allow-Origin: http://evil.com
这将允许浏览器从evil.com主机向其余的api服务器发送异步HTTP请求。
它是通过在其余api服务器上启用CORS来完成的,您可以阅读更多内容。
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
用于后端的几个库,用于启用跨源请求:
https://github.com/expressjs/cors - NodeJS / Express
https://pypi.python.org/pypi/Flask-Cors/ - Flask的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: 'test@test.com', 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!");
});
}
我也使用这个代码并在请求后获得成功。
对于发送和接收,您可能正在使用一个服务器ex:Nginx Config文件在启用了后端的站点中,您必须添加Access-Control-Allow-Origin:*或http:// localhost ,这可能会有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.