React-Flask项目遇415及JSON解析错误，请求问题排查

核心问题分析 #

后端的415 Unsupported Media Type和前端的Unexpected end of JSON input是连锁问题：

• 后端415错误说明没有正确解析到JSON请求体，要么是Content-Type头不符合要求，要么是请求体根本没到达后端；
• 前端JSON解析错误是因为后端在415错误时返回的是HTML格式的错误页面（而非JSON），导致response.json()解析失败。

结合你提供的代码和request.data为空的现象，以下是最可能的原因和解决方法：

1. 跨域请求（CORS）未正确处理 #

前端请求目标是http://localhost:5000/student，如果前端运行在其他端口（比如3000），浏览器会发送OPTIONS预请求，若后端未处理CORS，会导致实际POST请求的请求体被拦截，最终后端收到空的request.data。

解决方法： #

在Flask中添加CORS支持：

1. 安装依赖：

pip install flask-cors

2. 在Flask应用中配置：

from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # 允许所有跨域请求，生产环境可配置具体域名

2. 页面跳转中断请求 #

你的代码在try/catch块结束后立即执行window.location.href = '/login'，这会强制刷新页面，可能导致fetch('http://localhost:5000/student')还没完成发送请求就被中断，后端自然收不到请求体。

解决方法： #

将页面跳转逻辑放在请求完成的回调里，确保请求发送完毕再跳转：

// 修改onFinish函数的结尾部分
try {
  // ... 原有代码 ...

  if (formResponse.ok) {
    message.success(data.message);
    form.resetFields();
    window.location.href = '/login'; // 移到这里，确保请求完成后再跳转
  } else {
    message.error(data.error);
  }
} catch (error) {
  console.error('Error:', error);
}
// 移除原来在块外的window.location.href

3. 前端请求头与请求体验证 #

虽然你设置了Content-Type: application/json，但可以显式确认请求是否正常发送：

• 在前端fetch前添加日志，确认参数无误：

console.log('待发送的表单数据:', values);
console.log('序列化后的请求体:', JSON.stringify(values));

• 在Flask中打印关键请求头，确认Content-Type是否正确：

print('Content-Type:', request.headers.get('Content-Type'))

如果发现Content-Type不是application/json，检查是否有其他代码覆盖了请求头配置。

4. 后端JSON解析的严谨性优化 #

当前后端直接用request.json，如果请求体为空或格式错误会抛出异常，且返回的错误可能不是标准JSON。可以添加更严谨的检查：

@app.route('/student', methods=['GET','POST'])
def register():
    print(request.headers)
    print("---------")
    print(request.data)
    session = Session()

    try:
        # 先校验请求格式
        if not request.is_json:
            return jsonify({'error': '请求必须为JSON格式'}), 415
        
        data = request.get_json()  # 用get_json()替代request.json，更安全
        if not data:
            return jsonify({'error': '请求体不能为空'}), 400
        
        user = User(
            first_name=data.get('firstname'),
            last_name=data.get('lastname'),
            email=data.get('email'),
            reg_no=data.get('reg_no'),
            role=data.get('role'),
            password=data.get('password')
        )
        user.save_to_db(session)

        response = {'message': 'Registration successful'}
        return jsonify(response), 200
    except Exception as e:
        session.rollback()
        return jsonify({'error': str(e)}), 500
    finally:
        session.close()

验证步骤 #

1. 先处理CORS问题，确保跨域请求能正常发送；
2. 调整页面跳转逻辑，确保请求完成后再跳转；
3. 重新测试，观察后端的request.data是否有值，Content-Type是否正确。

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