Flask应用如何用原生JS将客户端JSON发送至服务端再转发第三方REST API

实现方案 #

你只需要做两处修改即可实现原生JS直接提交JSON到Flask服务端：

一、前端代码修改 #

你已经成功生成了JSON数据，只需要在拿到数据后用fetch发起POST请求即可，不需要依赖form表单。修改你的按钮点击事件和相关逻辑：

const btn = document.getElementById("click");
btn.addEventListener("click", async function () {
  const jsonData = tableToJson(table);
  try {
    const response = await fetch('/', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(jsonData)
    });
    const result = await response.text();
    // 可以在这里处理服务端返回的结果
    console.log('提交成功，服务端返回：', result);
  } catch (error) {
    console.error('提交失败：', error);
  }
})

注意：必须指定Content-Type: application/json请求头，否则Flask无法正确识别JSON格式的请求体。

二、Flask后端代码修改 #

你之前用的request.form只能获取表单格式（application/x-www-form-urlencoded）的请求数据，要获取JSON格式的请求数据需要用request.get_json()方法：

from flask import Flask, request, render_template

app = Flask(__name__)
@app.route('/', methods=['GET', 'POST'])
def main():
    if request.method == 'POST':
        # 直接获取前端提交的JSON数据，返回格式为Python字典/列表，可直接转发给第三方API
        json_data = request.get_json()
        # 这里可以直接把json_data传给你调用第三方REST API的逻辑
        return '接收成功'
    if request.method == 'GET':
        return render_template('index.html')

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000, debug=True)

如果后续出现跨域问题，可以安装flask-cors扩展配置跨域规则即可。

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