Http post request in Angular2 does not pass parameters - json

Question

I am trying to send a parameter using Angular2 POST to my Python/Tornado back-end which returns a JSON object. The parameters are being sent properly but at the Python side, it is returning 400 POST missing arguments error. I am using Ionic 2/Angular2 in the front-end and Python/Tornado server.
Angular2 code is as follows:
Here content is a variable containing HTML table
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 code is as follows:
def post(self):
print self.request.arguments
print self.get_argument('content')
self.finish(dict(result="ok", data=content))
Here is the error:
[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

Your Angular2 code looks reasonable, however your Python code is wrong, because you are treating the request as x-www-form-urlencoded. You have to access the JSON string through the request.body property:
data = tornado.escape.json_decode(self.request.body)
See https://stackoverflow.com/a/28140966/2380400 for an answer to a similar question.

Answer 2

You should maybe try to use something like URLSearchParams() with an URLencoded content type. I don't know much about Tornado but I am using ASP controllers and it works fine.
See Angular2 Documentation : https://angular.io/docs/ts/latest/api/http/index/URLSearchParams-class.html
Watch the following authentication example I am using :
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);
}