Ionic 2 / Angular 2 / CORS: 请求中未发送HTTP Headers

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  

数据（正文）是正确的，只有头文件的问题我无法解决。 非常感谢任何帮助。

- GwenTiana

---

你可以尝试像这样传递头信息 this.http.post(url, data, {headers:headers}).... - null canvas

我尝试过这样做，但是在发送请求后，我收到的REST API头如下： 主机www.example.com 连接保持活动状态 内容长度45 来源http://evil.com/ 用户代理Mozilla/5.0（Windows NT 6.1; WOW64）AppleWebKit/537.36（KHTML，like Gecko）Chrome/51.0.2704.106 Safari/537.36 内容类型纯文本 接受*/* 引用器http://localhost:8100/?restart=794567 接受编码gzip，deflate 接受语言en-US，en;q=0.8 - GwenTiana

好的，请查看这个答案：https://dev59.com/35jga4cB1Zd3GeqPPs81 - null canvas

谢谢，我已经阅读了这个问题。然而，没有答案实际上描述了这个问题的解决方案。根据Bala Abhinav的说法，他成功解决了这个问题，但他没有提到具体方法..."问题是CORS问题。现在已经解决了。谢谢。- Bala Abhinav" - GwenTiana

你是否在设置你的REST API中授权哪些头部？Access-Control-Allow-Headers: Authorization - Aguardientico

Answer 1

这个问题的答案在这里： https://dev59.com/91cO5IYBdhLWcg3wvUMp#45286959 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

- Michael Barrett

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().
}

- Silambarasan R.D

Answer 3

在发送和接收方面，您可能正在使用一个服务器，例如：Nginx。 在 sites-enabled 中的配置文件中为后端添加Access-Control-Allow-Origin: * 或 http://localhost 可以很有帮助。

- Nagendra Pantham

Answer 4

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

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

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

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

几乎适用于任何其他后端框架的列表还在继续。

- Stanley Kirdey

Answer 5

将 JSON 字符串化并不总是有效的。 首先，您需要将您的 JSON 数据转换为字符串查询以便服务器可以更快地理解。

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!");
    });
}

我也使用这段代码，并成功进行了POST请求。

- Jakegarbo