React结合Flask按ID拉取数据库详情接口返回400错误咨询

• 前端发送的GET请求未携带任何id参数，没有给后端传递查询所需的标识值
• 后端代码对空请求体的GET请求强行执行get_json(force=True)解析，空内容无法解析为合法JSON，直接触发400 Bad Request返回
  注：GET请求本身不建议携带请求体，部分浏览器、反向代理会直接丢弃GET请求的请求体内容，即使设置了Content-Type头也无法稳定传递内容

前端fetch代码调整 #

GET请求拉取详情时，优先把ID作为URL查询参数传递，移除多余的无效请求头配置，完整代码示例：

componentDidMount() {
  const targetId = 7; // 替换为实际需要查询的目标ID
  fetch(`/getMetaReport?id=${targetId}`, {
    method: 'GET',
    headers: {
      'Accept': 'application/json'
    }
  })
  .then(response => response.json())
  .then(reportData => console.log('详情拉取结果', reportData))
  .catch(err => console.error('请求异常', err))
}

注意：之前代码中给GET请求配置Content-Type: application/json属于无效配置，GET请求不会主动发送请求体，该配置对参数传递没有任何作用。

后端Flask代码调整 #

移除强制解析JSON请求体的逻辑，直接从URL查询参数读取ID，增加参数合法性校验，避免无效查询：

@app.route("/getMetaReport", methods=['GET'])
def getReports():
    # 从查询参数读取id，自动做int类型转换
    user_id = flask.request.args.get('id', default=None, type=int)
    # 参数缺失时返回明确错误提示，替代原有模糊的400错误
    if user_id is None:
        return jsonify({"error": "必填参数id缺失"}), 400
    
    raw_reports = Report.query.filter_by(user_id=user_id).all()
    metas = [r.get_meta() for r in raw_reports]
    return jsonify(metas), 200

可选：适配POST方式传JSON参数的场景 #

如果业务场景强制要求用POST请求提交带JSON体的查询，需要同步调整前后端逻辑：

• 前端：把请求方法改为POST，通过body传递序列化后的JSON字符串
• 后端：保留get_json解析逻辑，增加空值校验
  对应的前端POST实现示例：

fetch('/getMetaReport', {
  method: 'POST',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify({id: 7})
})

对应的后端POST实现示例：

req = flask.request.get_json()
user_id = req.get('id') if req else None
if not user_id:
    return jsonify({"error": "参数错误"}), 400

内容的提问来源于stack exchange，提问作者B.Y.