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: '[e-mail]', 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

这个问题在这里有答案：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/HttpHeadershttps://angular.io/guide/http

Answer 2

尝试使用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: '[e-mail]', 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().
}

Answer 3

如果您正在调用与Angular 2/Ionic应用程序(示例中为eviv.com(位于不同域上的REST API(示例中的example.com(，则您需要配置REST API服务器以返回此头：

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

这将允许浏览器从eviv.com主机向rest api服务器发送异步HTTP请求。

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

并且该列表对于几乎任何其他后端框架都是继续的。

Answer 4

对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: '[e-mail]', 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!");
    });
}

我也使用这个代码，并获得成功后请求。

Answer 5

对于发送和接收，您可能使用一个服务器，例如：Nginx在为后端启用的站点中配置文件，您必须添加访问控制允许来源：*或http://localhost这可能会有所帮助。