React调用Flask毕达哥拉斯定理API遇400错误，求解决方案

1. 移除React请求中的mode: 'no-cors' #

no-cors模式会强制浏览器使用简单请求规则，此时Content-Type: application/json这类自定义请求头会被忽略，后端Flask无法解析请求体中的JSON数据，直接返回400错误。删掉这个配置即可：

fetch('http://localhost:5000/api/pythagoras', {
    // 移除 mode: 'no-cors'
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({a: a, b: b}),
})

2. 转换前端输入的数字类型 #

React中input的value默认是字符串类型，直接传给后端会导致计算逻辑出错（比如字符串"3"平方会变成"33"而非数字9）。需要在发送请求前把a和b转成数字：

body: JSON.stringify({a: Number(a), b: Number(b)}),

3. 正确配置flask-cors #

确保你已经正确安装并初始化flask-cors：

• 先安装依赖包：

pip install flask-cors

• 修改Flask代码，添加CORS全局配置：

from flask import Flask, jsonify, request
from flask_cors import CORS  # 导入CORS模块

app = Flask(__name__)
CORS(app)  # 全局启用CORS，也可指定路径：CORS(app, resources={"/api/*": {"origins": "*"}})

@app.route('/api/pythagoras', methods=['POST'])
def pythagoras():
    data = request.get_json()
    # 增加参数校验，避免数据缺失或类型错误导致崩溃
    if not data or 'a' not in data or 'b' not in data:
        return jsonify({'error': '缺少参数a或b'}), 400
    try:
        a = float(data['a'])
        b = float(data['b'])
    except ValueError:
        return jsonify({'error': '参数必须是数字'}), 400
    c = (a**2 + b**2)**0.5
    return jsonify({'c': c})

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

4. 增加前端错误捕获 #

在fetch链式调用中添加错误处理，方便排查请求异常：

fetch(...)
.then(res => {
    if (!res.ok) {
        throw new Error(`请求失败，状态码: ${res.status}`);
    }
    return res.json();
})
.then(data => setC(data.c))
.catch(err => console.error('请求出错:', err));

按以上步骤修改后，重启Flask服务和React应用，即可正常调用API计算毕达哥拉斯定理。

内容的提问来源于stack exchange，提问作者Bruno Ricardo Carmena