Ionic 2/Angular 2/CORS:HTTP报头未随请求一起发送

Question

我正在使用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  

数据(正文)是正确的,只有我无法解决的标题问题.任何帮助将非常感激.

Answer 1

如果您调用的 REST API（示例中的 example.com）与您的 Angular 2 / Ionic 应用程序（示例中的 evil.com）位于不同的域，那么您需要配置 REST API 服务器以返回此标头：

Access-Control-Allow-Origin: http://evil.com 

这将允许浏览器将异步HTTP请求从evil.com主机发送到其余的api服务器。

这是通过在其余 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 库

对于几乎所有其他后端框架，该列表仍在继续。