角度2が正しく

Question

私は角2 HTTP経由の単純なPOSTリクエストを作ってみましたし、要求が正しく送信されないようですが、ここで私は、POSTリクエストを送信するために使用するコードはPOSTリクエストを送信しない：

import { Injectable } from '@angular/core'; 
import { Http, Response, Headers, RequestOptions } from '@angular/http'; 
import 'rxjs/add/operator/map';  

/** ... */ 

public sendData(s: string, k: any) { 
     let h = new Headers(); 
     h.append('Content-Type', 'application/json'); 
     h.append('Accept', 'application/json'); 

     let content = JSON.stringify({ 
      username: s, 
      key: k 
     }); 
     console.log(content); 

     return this.httpService.post(SERVER_URL, content, { 
     headers: h 
     }) 
     .map((res: Response) => { 
      return res.json(); 
     }); 
    } 

次のように

と（活字体で）Expressサーバのためのコードは次のとおりです。

public handleWhitelistRequest(req: Request, res: Response) { 
    let out: boolean; 
    console.log("post request received"); //DEBUG 
    if (req.body.key) { 
     out = wl.submit(req.body.username, req.body.key); 
    } else { 
     out = wl.submit(req.body.username, {}); 
    } 

    res.header("Access-Control-Allow-Origin", "*");  
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 
    res.json({ 
     username: req.body.username, 
     success: out 
    }); 
} 

はwlは、それが唯一のconst定義されて、何であるかを心配しないでください。 上記のAngular 2コードを呼び出してリクエストを送信すると、「CORS」というエラーメッセージが表示されます。これは、上記のようにヘッダーを追加することによって処理する必要があると考えられます。 さらに、'post request received'メッセージは、私に関係するコンソールに記録されていません。

エキストラ詳細と私が行っていることをデバッグします：

• をしても「ポスト要求を受け」ログイン、意図したとおりに動作し、サーバにPOSTリクエストを送信するためにポストマンを使用しました。
• GET要求は意図したとおりに動作します（角度からも）。

私はこの問題が角度のコードで正しくコンテンツを送信しない可能性がありますが、私は100％確実ではないと思います。ご協力いただきありがとうございます。

Answer 1

リクエストを送信する前にこれらのヘッダーを追加する必要はありません。投稿する前に内容をJSON.stringify()にする必要はありません。

public sendData(s: string, k: any) { 
    let content = { 
     username: s, 
     key: k 
    }; 

    return this.httpService.post(SERVER_URL, content) 
     .map((res: Response) => res.json()); 
} 

また、あなたはsubscribe()でそれを呼んでいるまで、あなたのHTTPメソッドは発生しませんので、私はあなたが別のコンポーネントにこのsendDate()メソッドを呼び出し、応答に加入していると仮定しています。

通常のHTTPは最終的に償却され、HTTPクライアントに置き換えられます。

これは、あなたがこの使用してHTTPクライアントを行うだろう方法です、あなたはhere

public sendData(s: string, k: any) { 
    let content = { 
     username: s, 
     key: k 
    }; 

    return this.httpService.post<any>(SERVER_URL, content); 
} 

Answer 2

を読むことができ、これを試してみてください。

import { Http, Response, Headers, RequestOptions } from '@angular/http'; 

    constructor(private http: Http) {} 


    public sendData(uName, k) { 
     let content = { 
      username: uName, 
      key: k 
     }; 
     return this.http.post(SERVER_URL,content) 
     .subscribe((res: any) => { 
      console.log(res); 
     }); 
    }