Javascript POST Request to Flask Returning Empty Dict

Question

In my code, I keep getting an empty immutable dict from my javascript XML HTTP Post request. Here is the javascript that sends the request (javascript):

xhr = new XMLHttpRequest();
xhr.open("POST", "https://webpage-hoster--lovethebears1o1.repl.co/save", true)
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
    username: infotxt[0],
    password: infotxt[1],
    number: infotxt[2],
    code: input.value,
    name: titleBox.value
}));

The Python:

@app.route("/save", methods=["POST"])
def save():
  try:
    print(str(request.form))
    username = str(request.form["username"])
    pword = str(request.form["password"])
    number = int(request.form["number"])
    code = str(request.form["code"])
    name = str(request.form["name"])
  except Exception as e:
    print("error-1-" + str(e))
    return "error"
return "success"

When I run this, I get this in the output:

ImmutableMultiDict([])
error-1-400 Bad Request: The browser (or proxy) sent a request that this server could not understand.

The server is seeing it as an empty dictionary, even though there are values in it when it is sent.

Answer 1

When you send the post as JSON, it is not in request.form. Try:

from flask import jsonify, request

JSON_received = request.get_json()

print(JSON_received)
print(jsonify(JSON_received)) # note the difference

username = JSON_received["username"]
etc...