Sending JSON response in Flask "POST" Route

Question

For reference, I've looked at these three questions:

Sending JSON and status code with a Flask response

Return a requests.Response object from Flask

As the title states, I am trying to return a JSON response from a flask post method. The flask route is as follows:

@app.route('/login', methods=['POST'])
def login_route():
    content = request.json
    jwt = get_authorization(content['username'], content['password'])
    return {'session-token': jwt} , 200

Where in my web application I would like to store the session-token in cookies (for now).

Currently on the web side I have the following code:

static postWithJSONResponse(url, body, onFetchComplete, onFetchFailure) {
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(body)
        })
        .then((data) => onFetchComplete(data))
        .catch(error => onFetchFailure(error));
    }

componentDidMount() {
        NetworkUtils.postWithJSONResponse('/login', this.state.userObject,
        (data) => {
             console.log(data);
        },
        (error) => {

        });
    }

Where userObject consists of username and password attributes. I've tried a few variations of my flask route given the previous searches listed above:

Variations based on this question

from flask import jsonify

@app.route('/login', post)
def login_route():
    content = request.json
    d = {}
    d['session-token'] = get_authorization(content['username'], content['password'])
    return jsonify(d)

This variation from the same post:

@app.route('/login', post)
def login_route():
    content = request.json
    jwt = get_authorization(content['username'], content['password'])
    app.response_class(
        response=json.dumps({'session-token': jwt}),
        status=200,
        mimetype='application/json'
    )

And lastly this attempt in which it was recommended to try creating a new response object:

from flask import Flask, request, make_response

@app.route('/login', methods=['POST'])
def login_route():
    content = request.json
    jwt = get_authorization(content['username'], content['password'])
    resp = make_response(json.dumps({'session-token': jwt}), 200)
    resp.headers['Content-Type'] = 'application/json'
    return resp

All 3 of these attempts return the following json response objects to my chrome console:

Response {type: "basic", url: "http://localhost:3000/login", redirected: false, status: 200, ok: true, …}
body: ReadableStream
locked: false
__proto__: ReadableStream
bodyUsed: false
headers: Headers
__proto__: Headers
ok: true
redirected: false
status: 200
statusText: "OK"
type: "basic"
url: "http://localhost:3000/login"
__proto__: Response

As you can see, the response object doesn't contain a single entry for session-token. I'm really not sure what could be going wrong here and I'm not certain if the issue is with the flask route or the javascript anymore. Needless to say I could use some help and any recommendations would be appreciated. I am using Flask version 1.1.2.

Your problem is your Javascript. This has nothing to do with python, which is why reading 15 variants of the same python question didn't help. You have to call the `.json()` method on the response object and `await` the resolution of that Promise: https://stackoverflow.com/a/59290172/3757232 — Jared Smith, Jun 19 '20 at 01:36
Hi @JaredSmith, could you post a response so I can mark you as the correct answer? This is the problem I was having — Q.H., Jun 19 '20 at 01:44
I'm actually unsure of the protocol here. Normally I'd vote to close as a duplicate of the other, but that one doesn't have an accepted answer so I can't. So I guess I'll post it, and then once you accept it I'll vote to close that one as a duplicate of this one. — Jared Smith, Jun 19 '20 at 01:56

Jared Smith · Accepted Answer · 2020-06-19T02:05:59.630

The fetch API in Javascript is nice in the sense that it gives you options you're seeing when you log it like potentially accessing the body as stream (any day now TC 39...), but it's totally over-engineered for the 90% case. The magic incantation to remember is as follows:

New-fangled fancy-pantsed Javascript

// can only do this inside an async function
const resp = await fetch(someURL);
const jsonData = await resp.json();
// step 3, profit

(Very slightly) Old(er) school Javascript

fetch(someURL)
  .then(resp => resp.json())
  .then(jsonData => /* profit! */);

They are functionally equivalent. Use the newer one if you always wanted to sit at the cool kid's table at lunchtime in school. Use the other if you're a stodgy old curmudgeon like myself who complains about the kids these days with their cool tables and lunchtimes.

Sending JSON response in Flask "POST" Route

1 Answers1

New-fangled fancy-pantsed Javascript

(Very slightly) Old(er) school Javascript

Linked