Ionic 2/Angular 2/CORS: Tiêu đề HTTP không được gửi cùng với yêu cầu

Question

Tôi đang làm việc trên một dự án sử dụng Ionic 2 (2.0.0-beta.10). Tôi cố gắng chuyển mã thông báo ủy quyền với yêu cầu. Tuy nhiên tiêu đề không được gửi. Ngoài ra các tiêu đề khác tôi đã cố gắng để vượt qua với yêu cầu không được gửi đi.

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 của tôi nhận được yêu cầu này với tiêu đề sau:

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 

Các dữ liệu (cơ thể) do thỏa thuận hợp đúng, chỉ có vấn đề tiêu đề tôi không thể giải quyết. Bất kỳ trợ giúp nào cũng sẽ được đánh giá cao.

Answer 1

Nếu bạn đang gọi REST API (example.com trong ví dụ của bạn) nằm trên miền khác từ ứng dụng Angular 2/Ionic của bạn (ví dụ: evil.com trong ví dụ của bạn), thì bạn cần cấu hình máy chủ REST API trở lại tiêu đề này:

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

nào sẽ cho phép trình duyệt để gửi yêu cầu async HTTP từ evil.com máy chủ đến máy chủ api nghỉ ngơi.

Nó được thực hiện bằng cách bật CORS trên máy chủ api còn lại, bạn có thể đọc thêm về nó một chút.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Một số thư viện cho các phụ trợ cho phép các yêu cầu nguồn gốc chéo:

https://github.com/expressjs/cors - NodeJS/tốc

https://pypi.python.org/pypi/Flask-Cors/ - Python CORS thư viện cho Flask

và danh sách vẫn tiếp tục trong gần bất kỳ khung công tác phụ trợ nào khác.

Answer 2

Stringify JSON này không thực sự làm việc ở tất cả các lần. Trước tiên, bạn cần phải chuyển đổi dữ liệu JSON của mình thành StringQuery để được máy chủ hiểu đúng cách và nhanh hơn nhiều.

public StringQuery(jsonString) { 
     return Object.keys(jsonString).map(function (key) { 
      return encodeURIComponent(key) + '=' + encodeURIComponent(jsonString[key]); 
     }).join('&'); 
     } 

sau đó bạn thực hiện chức năng bưu điện hoặc phương pháp

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

tôi sử dụng mã này quá và nhận được yêu cầu bài thành công.