React调用Python API获取请求体时出现CORS错误排查

你的问题核心在于：当调用request.get_json()时，如果前端请求不符合JSON格式要求（比如缺少Content-Type: application/json头，或者请求体不是合法JSON），Flask会提前抛出400错误，此时如果CORS配置没有覆盖错误响应，浏览器就会触发CORS错误提示（而非直接显示400错误）。Postman能正常工作是因为它默认会正确设置请求头，且不会严格校验CORS规则。

1. 检查并修复Flask后端的CORS配置 #

确保你正确使用flask-cors库，并且配置覆盖所有路由和错误响应：

from flask import Flask, request
from flask_cors import CORS

app = Flask(__name__)
# 允许所有来源，生产环境建议指定具体域名
CORS(app, supports_credentials=True)

@app.route('/your-api-endpoint', methods=['POST'])
def your_api():
    try:
        data = request.get_json()
        if not data:
            return {"error": "请求体不能为空"}, 400
        # 你的业务逻辑
        return {"result": "success"}, 200
    except Exception as e:
        return {"error": str(e)}, 400

• supports_credentials=True确保携带凭证时CORS正常（如果需要的话）
• 用try-except包裹request.get_json()，确保错误响应也会带上CORS头

2. 修复React端的请求格式 #

确保请求头正确设置Content-Type，并且请求体是JSON字符串：

// React请求示例
fetch('http://your-flask-api/your-api-endpoint', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json', // 必须设置这个头
    // 如果需要携带Cookie，加上下面一行
    // 'Credentials': 'include'
  },
  body: JSON.stringify({ key: 'value' }) // 必须用JSON.stringify转换
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));

• 不要省略Content-Type: application/json，否则Flask无法解析JSON请求体
• 必须用JSON.stringify()把JS对象转为JSON字符串，否则请求体格式错误

3. 验证请求是否符合要求 #

可以在浏览器开发者工具的Network标签里查看请求：

• 检查Request Headers里是否有Content-Type: application/json
• 检查Request Body是否是合法的JSON格式

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