JSONでAngular2 POSTを作成する

Question

私はAPI用の簡単なFlaskバックエンドを持っていて、POSTをしたいと思っています。 私はエラーがわかりません - エラーメッセージが表示されますが、角度またはフラスコの問題があるかどうかはわかりません。私は私のフラスコに（）request.get_jsonを試みたが、

{BadRequest} 400 BadRequestました：ブラウザ（またはプロキシ）は このサーバがで

Angular2コールを理解することができなかったことを、要求を送信し私service.ts：

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


@Injectable() 
export class NicksService { 

    private headers = new Headers({'Content-Type': 'application/json'}); 
    nickUrl: string = "http://localhost:5000/nick"; 
    constructor(private http: Http) { } 

    // Send the nick to the server to see if it is valid 
    checkNickValidity(nickName: string): Observable<string>{ 

    return this.http.post(this.nickUrl, JSON.stringify({nick: nickName}), {headers: this.headers}) 
    .map(this.extractData) 
    .catch(this.handleError) 
    } 

フラスコバックエンド：

from flask_cors import CORS 
from flask.ext.api import FlaskAPI 
from flask import request 

app = FlaskAPI(__name__) 
CORS(app) 


@app.route('/') 
@app.route('/nick', methods=['POST']) 
def check_nick(): 

    try: 
     nick = request.json 
     if nick =='AmandaPanda': 
      return 'Good' 
     else: 
      return 'No nick found' 
    except: 
     return 'error' 



if __name__ == '__main__': 
    app.run() 

Answer 1

私はあなたのアプリケーションの両面に問題があると思います。

クライアント側：

角度のHttp's post方法は、あなたがそれを文字列化する必要はありません。つまり、身体パラメータの内の任意のオブジェクトを受け取ります。

例えば：

this.http.post(this.nickUrl, {nick: nickName}, {headers: this.headers}) 

サーバー側：クライアントの要求がサーバに適切に着いたら

、あなたはデータを適切に取得されていません。

from flask import jsonify 

(... your code ...) 

    data = request.json 
    nick = data.get('nick') 
    if nick == 'AmandaPanda': 
     return jsonify({'message': 'good'}), 200 
    else: 
     return jsonify({'message': 'no nick found'}), 400 

ここで、JSONデータを変数dataに辞書として格納されます。あなたがする必要がどのような

はこのようなものです。その後、ニックネームは前記辞書のnickキーから得られる。

最後に、json形式でクライアントに戻ることをお勧めします。それはFlask's jsonifyの方法です。応答に200と400のstatus codesが追加されていることに注意してください。要求が正しく受け入れられたか（200）、不正な要求（400）だったかをクライアントに示します。