使用 JSON 制作 Angular2 POST

Question

我有一个用于 API 的简单 Flask 后端，我想制作一个 POST。我不确定错误是什么 - 我收到错误消息，但不确定它是 Angular 还是 Flask 问题。我在我的 Flask 中尝试了 request.get_json()，得到了

{BadRequest}400 BadRequest: The browser (or proxy) sent a request that this server could not understand

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

Flask 后端：

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

我认为你在申请的两方面都有问题。

客户端：

Angular 的 Http's post 方法接收 body 参数中的任何对象，这意味着您不需要将其字符串化。

例如：

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 键中获得了昵称。

最后，更好的做法是return以json的形式给客户端。这就是 Flask's jsonify method is for. Notice the 200 and 400 status codes 附加到响应中的内容，以向客户端指示请求是否被正确接受 (200) 或请求是否错误 (400)。

使用 JSON 制作 Angular2 POST

Making an Angular2 POST with JSON

python

json

flask

angular2-services

angular