如何用JavaScript发送JSON POST请求并在Flask服务器读取？

问题核心原因 #

你的前端请求和后端代码存在两处关键错误，导致请求失败：

1. 前端请求格式错误：设置Content-Type: application/json时，fetch的body必须传入JSON字符串，而非原始JavaScript对象。
2. 后端读取逻辑错误：后端代码尝试从request.files读取文件，但前端发送的是JSON数据，并非文件上传请求，因此会触发字段不存在的错误。

修正后的前端代码 #

const uploadjson = storeDictionary;
const url = "/uploadset/" + setName;

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  // 将JavaScript对象转为JSON字符串
  body: JSON.stringify(uploadjson)
})
.then((response) => response.json())
.then((data) => {
  console.log('Success:', data);
})
.catch((error) => {
  console.error('Error:', error);
  console.log("Data:", uploadjson);
});

修正后的Flask后端代码 #

@app.route("/uploadset/<name>", methods=['GET','POST'])
def uploads(name):
    if flask.request.method == "POST":
        print("Upload!")
        if 'id' in flask.session and flask.session['id'] in client:
            sessid = flask.session['id']
            if name != "":
                # 直接解析并获取前端发送的JSON数据
                json_data = flask.request.get_json()
                if json_data:
                    try:
                        # 将JSON数据传入处理函数
                        if processUploadedSet(json_data):
                            error = False
                            success = True
                            # 返回JSON格式的成功响应
                            return flask.jsonify({"success": success})
                    except Exception as e:
                        print("处理错误:", e)
                        return flask.jsonify({"error": "数据处理失败"}), 500
                else:
                    return flask.jsonify({"error": "未接收到有效JSON数据"}), 400
        return flask.jsonify({"error": "权限验证失败"}), 401
    # GET请求的默认响应（按需调整）
    return flask.jsonify({"message": "GET请求已接收"}), 200

关键说明 #

• 前端必须通过JSON.stringify()将对象转为JSON字符串，否则后端无法识别请求体格式。
• 后端使用request.get_json()自动解析JSON请求体，无需手动处理字符串转对象的逻辑。
• 后端响应统一用jsonify()返回JSON格式数据，确保前端response.json()能正确解析结果。

内容的提问来源于stack exchange，提问作者france1