React向Flask接口传输入数据时遇循环对象及新错误求助

我有一个基于Node.js后端和MySQL数据库的React应用，需要将React输入字段的数据发送给Python API作为Python函数参数。使用Axios向Flask服务器发送数据时出现循环对象错误，后续还出现新的请求错误，相关代码如下：

React组件代码 #

const send_data = ()=>
{
    const trade = document.getElementById("trade");
    const index = document.getElementById("index");
    const tradeType = document.getElementById("type");
    const strikePrice = document.getElementById("strikeP");
    const trigger = document.getElementById("trigger");
    const perc = document.getElementById("percentage");
    const ce = document.getElementById("ce");
    const pe = document.getElementById("pe");
    const entry = document.getElementById("entry");
    const exit = document.getElementById("exit");


    axios.post("127.0.0.1:5000/trade_data" , {
        trade_no : trade.value,
        index_name : index.value,
        trade_type : tradeType.value,
        strike_price : strikePrice,
        ce_d : ce.value,
        pe_d : pe.value,
        entry_time : entry.value,
        exit_time : exit.value,
        trigger_points : trigger.value,
        sl_percentage : perc.value
    }).then(console.log("Data Sent"));
}

按钮调用代码 #

<button id="start" onClick={send_data}>Start</button>

Flask代码 #

from flask import Flask
import requests

app = Flask(__name__)
@app.route('/trade_data' , methods = ['GET'])

def show_data():
    r = requests.get("http://127.0.0.1:5000/trade_data")
    print(r)
    return r

if __name__ == '__main__':
    app.run(debug = True)

React端修复 #

1. 解决循环对象错误 #

strike_price字段直接传递了DOM元素而非其value属性，DOM对象包含循环引用无法被JSON序列化，导致错误。修改如下：

// 原代码
strike_price : strikePrice,
// 修改后
strike_price : strikePrice.value,

2. 修复请求URL错误 #

请求地址缺少http://前缀，浏览器会将其视为相对路径，导致请求发送到React应用域名而非Flask服务器：

// 原代码
axios.post("127.0.0.1:5000/trade_data" , { ... })
// 修改后
axios.post("http://127.0.0.1:5000/trade_data" , { ... })

3. 修复Promise回调执行时机错误 #

.then(console.log("Data Sent"))会立即执行日志输出，而非请求成功后执行，改为箭头函数并添加错误捕获：

// 原代码
.then(console.log("Data Sent"));
// 修改后
.then(() => console.log("Data Sent"))
.catch(err => console.error("请求失败:", err));

修复后的React完整代码 #

const send_data = () => {
    const trade = document.getElementById("trade");
    const index = document.getElementById("index");
    const tradeType = document.getElementById("type");
    const strikePrice = document.getElementById("strikeP");
    const trigger = document.getElementById("trigger");
    const perc = document.getElementById("percentage");
    const ce = document.getElementById("ce");
    const pe = document.getElementById("pe");
    const entry = document.getElementById("entry");
    const exit = document.getElementById("exit");

    axios.post("http://127.0.0.1:5000/trade_data", {
        trade_no: trade.value,
        index_name: index.value,
        trade_type: tradeType.value,
        strike_price: strikePrice.value,
        ce_d: ce.value,
        pe_d: pe.value,
        entry_time: entry.value,
        exit_time: exit.value,
        trigger_points: trigger.value,
        sl_percentage: perc.value
    }).then(() => console.log("Data Sent"))
      .catch(err => console.error("请求失败:", err));
}

Flask端修复 #

1. 匹配请求方法 #

React使用POST发送数据，但Flask路由仅允许GET方法，修改路由配置：

# 原代码
@app.route('/trade_data' , methods = ['GET'])
# 修改后
@app.route('/trade_data' , methods = ['POST'])

2. 解决循环调用问题 #

原视图函数中通过requests.get自我调用导致无限循环，应从request对象中获取POST数据：

from flask import Flask, request, jsonify  # 新增导入request和jsonify

app = Flask(__name__)

# 解决跨域问题（React与Flask端口不同时必须添加）
from flask_cors import CORS
CORS(app)

@app.route('/trade_data', methods=['POST'])
def receive_data():
    # 获取前端发送的JSON数据
    data = request.get_json()
    print("收到的数据:", data)
    # 此处可调用目标Python函数，将data作为参数传入
    # your_python_function(**data)
    return jsonify({"status": "success", "message": "数据已接收"})

if __name__ == '__main__':
    app.run(debug=True)

跨域依赖安装 #

由于React和Flask运行在不同端口，需安装flask-cors解决跨域问题：

pip install flask-cors

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