如何避免JS前端发往Python后端的JSON请求被解析为NoneType

前端核心配置错误 #

• 混淆了jQuery Ajax与Axios的配置规则：
  • 顶层contentType是jQuery专属配置项，Axios中设置请求头必须嵌套在headers字段下，当前配置实际未生效，请求发出时Content-Type头并未被设置为JSON格式
  • dataType: 'json'同样是jQuery参数，Axios无对应配置，传入后无任何作用
• 手动序列化请求体属于多余操作：Axios原生支持传入普通JS对象作为请求体，会自动完成JSON序列化，同时自动配置正确的Content-Type: application/json响应头
• 打印语句存在语法缺陷：await axios返回的是完整响应对象，代码中未定义data变量，直接执行console.log(data)会触发引用错误

后端认知偏差 #

• request.form仅支持解析application/x-www-form-urlencoded、multipart/form-data格式的表单请求体，发送JSON格式请求时该取值方式返回None属于正常表现，无需从该渠道获取JSON数据
• request.get_json()默认仅在请求头Content-Type为application/json时才会解析请求体，当前因前端请求头配置错误，默认返回None属于预期表现
• 给request.get_json()加force=True后报400，是因为该参数会忽略请求头类型强制按JSON解析请求体，此时请求体要么为空、要么格式不符合JSON规范，解析失败即抛出400错误

修正后代码示例 #

前端最优写法（无需手动序列化） #

async submitScore(){
    const res = await axios({
        url: 'http://127.0.0.1:5000/submit',
        method: "POST",
        data: { "score": game.score } // 直接传入普通对象即可，Axios自动处理序列化和请求头
    });
    console.log(res.data) // 从响应对象中提取后端返回的内容
}

如果有特殊需求必须手动序列化JSON，需补充显式请求头配置，否则后端仍无法正常识别：

async submitScore(){
    const res = await axios({
        url: 'http://127.0.0.1:5000/submit',
        method: "POST",
        data: JSON.stringify({"score": game.score}),
        headers: { 'Content-Type': 'application/json;charset=utf-8' } // 必须在headers内显式配置
    });
    console.log(res.data)
}

后端修正（基本无需大幅改动，前端请求正确后即可正常解析） #

def submit_score():
    # 直接通过get_json取值即可，无需读取request.form
    data = request.get_json()
    print(data) // 可正常获取包含score字段的字典
    return 'hello'

若存在特殊场景需要忽略请求头强制解析JSON，可补充silent=True参数，解析失败时会返回None而非直接抛出400错误：request.get_json(force=True, silent=True)

若前端页面运行端口与后端服务端口不一致，属于跨域场景，需在后端补充CORS跨域配置，同时确保接口支持OPTIONS请求方法，避免浏览器的跨域预检请求直接命中业务逻辑，导致空请求体触发解析错误。

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