React.js向Flask API端点提交数据失败的问题咨询与实现指导

实现思路正确性 #

你的思路完全正确：React前端收集用户输入，通过POST请求将数据发送到Flask后端，后端接收数据后存入数据库，这是前后端分离项目的标准流程之一。

核心问题与修复步骤 #

一、Flask后端问题（导致404和跨域错误） #

当前Flask代码存在路由冲突、未实现POST方法、无跨域支持三个关键问题，修复如下：

1. 先安装跨域依赖：

pip install flask-cors

2. 修正后的Flask代码：

from flask import Flask, request, jsonify
from flask_restful import Api, Resource
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # 允许跨域请求
api = Api(app)

class LogInfo(Resource):
    def post(self):
        # 从请求体获取JSON数据
        data = request.get_json()
        username = data.get('username')
        phone_num = data.get('phone_num')
        
        # 这里后续可以添加存入数据库的逻辑，比如用SQLAlchemy操作
        print(f"收到数据：用户名={username}，手机号={phone_num}")
        
        # 返回响应
        return jsonify({"status": "success", "message": "数据已接收"})

api.add_resource(LogInfo, "/test")  # 绑定POST路由到/test

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

二、React前端问题（导致值获取错误和未捕获异常） #

当前React代码存在表单值获取错误、请求体内容错误、无错误处理三个问题，修复如下：

修正后的React代码：

handleSubmit(event) {
  event.preventDefault(); // 提前阻止默认行为，避免重复调用
  const target = event.target;
  // 获取表单输入的实际值，不是DOM元素
  const username = target.username.value;
  const phone_num = target.phone.value;

  if (!check_name_valid(username)) {
    alert('* 请输入你的全名');
  } else if (!check_phone_valid(phone_num)) {
    alert('* 请输入纯数字手机号（例如：1231231234）');
  } else {
    this.postRequest(username, phone_num);
  }
}

postRequest(username, phone_num) {
  const requestOptions = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json' // 必须指定Content-Type，否则Flask无法解析JSON
    },
    body: JSON.stringify({ username, phone_num }) // 发送用户实际输入的数据
  };

  fetch('http://127.0.0.1:5000/test', requestOptions)
    .then(response => {
      if (!response.ok) {
        throw new Error(`请求失败：${response.status}`);
      }
      return response.json();
    })
    .then(data => {
      console.log('响应数据：', data);
      this.setState({ username, phone: phone_num });
    })
    .catch(error => {
      console.error('请求错误：', error);
      alert('数据提交失败，请检查后端服务是否启动');
    });
}

三、错误原因说明 #

1. "Failed to fetch"错误：主要是跨域问题——React默认运行在localhost:3000，Flask在localhost:5000，浏览器同源策略阻止跨域请求，添加CORS(app)即可解决。
2. Flask返回404：原代码路由定义冲突，且没有匹配POST请求的路由，修正后/test路由绑定了POST方法，能够正确接收请求。
3. 表单值获取错误：原代码中target.username拿到的是DOM输入框元素，不是用户输入的内容，必须用.value获取实际值。

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