React表单提交至Flask服务器时request.form返回空ImmutableMultiDict问题

核心问题分析 #

1. 表单数据传递错误：直接将event.target（表单DOM元素）作为fetch的body参数，浏览器无法正确解析该对象为标准请求体，导致Flask端无法识别表单数据。
2. 表单控件缺失name属性：<select>标签没有设置name，该字段不会被包含在表单提交数据中。
3. 异步代码写法不规范：async/await与.then()混合使用，易导致逻辑混乱。

修复后的代码 #

前端（register.js）

async function sendUserInfo(formData) {
  try {
    const response = await fetch('http://127.0.0.1:5000/get_user_info', {
      method: 'POST',
      body: formData
    });
    const result = await response.json();
    console.log(result);
  } catch (error) {
    console.error('请求失败:', error);
  }
}

async function handleSubmit(event) {
  event.preventDefault();
  // 用FormData正确包装表单数据
  const formData = new FormData(event.target);
  await sendUserInfo(formData);
}

// component function
function Register() {
  console.log('Register Page');

  return (
    <div id='main_container'>
      <form onSubmit={handleSubmit}>
        <input name='username' className='register_input' placeholder={inputUsername.placeholder} />
        <input name='gender' className='register_input' placeholder={inputGender.placeholder} />
        <input name='age' className='register_input' placeholder={inputAge.placeholder} />
        {/* 给select添加name属性，确保字段被提交 */}
        <select name="city" className="register_input">
          {cities.map((city) => (
            <option key={city} className='select_option' value={city}>{city}</option>
          ))}
        </select>
        {/* 普通按钮添加type="button"，避免触发表单提交 */}
        <button className='input_button' type="button">채팅 시작하기...</button>
        <input className='input_button' type='submit' />
      </form>
    </div>
  );
}

后端（server.py）

from chat_app.chat import ChatApp, ChatRoom, User
from flask import Flask, request, jsonify
from flask_cors import CORS

server = Flask(__name__)
CORS(server)

@server.route('/get_user_info', methods=['GET', 'POST'])
def get_user_info():
    if request.method == 'POST':
        user_info = request.form
        print(user_info)
        # 可单独获取字段，例如：
        # username = request.form.get('username')
        # city = request.form.get('city')
    # 使用jsonify替代json.dumps，自动设置正确响应头
    return jsonify({'status': 'successful'})

server.run(debug=True)

关键修改说明 #

1. 用FormData包装表单：new FormData(event.target)会自动收集所有带name属性的表单控件值，生成符合HTTP规范的请求体，浏览器会自动设置正确的Content-Type，Flask的request.form可直接解析。
2. 补充select的name属性：表单控件必须通过name属性标识字段名，否则无法被FormData捕获。
3. 优化异步代码：统一使用async/await，避免回调嵌套，同时增加错误捕获逻辑。
4. Flask响应优化：使用jsonify替代json.dumps，自动设置Content-Type: application/json响应头，更符合REST规范。

排查验证方法 #

在浏览器开发者工具的Network标签中，查看POST请求的Form Data部分，确认所有字段（username、gender、age、city）都已正确提交，即可验证前端数据传递是否正常。

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