Flask - Getting POST data from Angular $http.post()

Question

In a very basic test web app I am making, I am using angular to run a function when a form is submitted. The function asynchronously posts data to a simple api I built which is supposed to input data into a database dependent on the POST information it receives. It seems like the POST is working correctly on the front end, however I cannot access request.json from Flask at all or get any of the post data. I feel like this problem may be something simple I have overlooked but as of now I cannot figure it out at all. Here is some of the code:

AngularJS:

$scope.submitAddMsg = function (){
        var data = {'author': $scope.msgauthor, 'message': $scope.msgmsg};
        $http.post('/addMessage', data, {headers: {'Content-Type': 'application/json'}}).
        success(function(data, status, headers, config) {
            console.log(data);
            console.log(status);
            console.log(headers);
            console.log(config);
        }).
        error(function(data, status, headers, config) {
            alert(JSON.parse(data));
        });
    };

Flask view function for /addMessage

@app.route('/addMessage', methods=['POST'])
def addMessage():
    #results in 'None type not iterable'
    #response = request.form.get('author')

    #results in a 400 error
    #response = request.get_json()

    #results in a 400 error
    #response = request.get_json()

    #results in 'author' not defined
    #name = request.args.get('author')
    #return jsonify(author = author)

    return str(jsonify(response))

I cannot stop getting errors as if the request is not what I think it should be, is there something else I should be doing to properly handle this? Because I cannot access any POST information when using Angular to send the POST or even a REST Client with payload exactly how the angular is sending data.

Here is the JavaScript console to see what data , status , headers , and config ends up being in the success function that runs after the POST:

<Response 46 bytes [200 OK]>
testbase.js:53 200
testbase.js:54 function (c){a||(a=Xc(b));return c?(c=a[z(c)],void 0===c&&    (c=null),c):a}
testbase.js:55 Object {method: "POST", transformRequest: Array[1],     transformResponse: Array[1], headers: Object, url: "/addMessage"…}data:     Objectheaders: ObjectAccept: "application/json, text/plain, */*"Content-Type:     "application/json"__proto__: Objectmethod: "POST"transformRequest:     Array[1]transformResponse: Array[1]url: "/addMessage"__proto__: Object

Any help on getting this working right is much appreciated, let me know if you need more information

Answer 1

you can use request.data to get the raw post data.

you can also set the silent Flag of get_json to True so you can get the exact message of failure.

from the docs

get_json(force=False, silent=False, cache=True)

Parameters:
force – if set to True the mimetype is ignored.
silent – if set to False this method will fail silently and return False.
cache – if set to True the parsed JSON data is remembered on the request.

Answer 2

Try adding app.debug = True before you start the app and try again.

You can also try: message = request.json.get('message')

And I would also try putting this in your route

['POST', 'OPTIONS'])