Angular2中的HTTP发布请求未传递参数

Question

我正在尝试使用Angular2 POST将参数发送到返回JSON对象的Python / Tornado后端。 参数已正确发送，但在Python端，它返回了400个POST缺少参数错误。 我在前端和Python / Tornado服务器中使用Ionic 2 / Angular2。

Angular2代码如下：这里的内容是一个包含HTML表的变量

let body = JSON.stringify({content: content});
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
this.http.post(url, body, options).map(res => res.json()).subscribe(data => {
      console.log(data)
}, error => {
      console.log(JSON.stringify(error));
});

Python代码如下：

def post(self):
    print self.request.arguments
    print self.get_argument('content')
    self.finish(dict(result="ok", data=content))

这是错误：

[W 160824 06:04:30 web:1493] 400 POST /test (182.69.5.99): Missing argument content
[W 160824 06:04:30 web:1908] 400 POST /test (182.69.5.99) 1.67ms

Answer 1

您的Angular2代码看起来合理，但是您的Python代码是错误的，因为您将请求视为x-www-form-urlencoded。 您必须通过request.body属性访问JSON字符串：

data = tornado.escape.json_decode(self.request.body)

有关类似问题的答案，请参见https://stackoverflow.com/a/28140966/2380400 。

Answer 2

您也许应该尝试将URLSearchParams（）之类的东西与URL编码的内容类型一起使用。 我对Tornado不太了解，但是我使用的是ASP控制器，它工作正常。

参见Angular2文档： https ://angular.io/docs/ts/latest/api/http/index/URLSearchParams-class.html

观看以下我正在使用的身份验证示例：

controllerURL: string = "/APIConnexion";

login(aLogin: string, aMdp: string) {
        // parameters definition (has to have the same name on the controller)
        let params = new URLSearchParams();
        params.set("aLogin", aLogin);
        params.set("aMdp", aMdp);
        // setup http request
        let lHttpRequestBody = params.toString();
        let lControllerAction: string = "/connexion";
        let lControllerFullURL: string = this.controllerURL + lControllerAction;
        let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
        let options = new RequestOptions({ headers: headers });

        // call http
        return this.http.post(lControllerFullURL, lHttpRequestBody, options)
            .map((res: any) => {
                // data received as JSON
                let data = res.json();

                // Do something with your data

            }
            ).catch(this.handleError);
    }