web-dev-qa-db-ja.com

Ionic 2 / Angular 2 / CORS：HTTPヘッダーがリクエストとともに送信されない

Ionic 2（2.0.0-beta.10）を使用してプロジェクトに取り組んでいます。リクエストで認証トークンを渡そうとしましたが、ヘッダーが送信されていません。その他リクエストで渡そうとしたヘッダーが送信されていません。

let url = 'http://www.example.com/savedata';
let data = JSON.stringify({ email: '[email protected]', 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!");
});

My 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

データ（本文）は正しく、ヘッダーの問題だけを解決できません。どんな助けでも大歓迎です。

httpangularcorsionic2
12
GwenTiana

この質問にはここに答えがあります： https://stackoverflow.com/a/45286959/411965

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

1
Michael Barrett

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: '[email protected]', 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().
}
0
Silambarasan R.D