Flask API调用异常：Python请求正常，React Fetch请求报错

问题情况 #

我用Python Flask开发了一个网站爬取API，返回JSON格式数据。使用Python的requests库发送POST请求时完全正常，但在React应用中用Fetch函数调用该API时，服务器端持续出现错误。两者发送的请求参数看似一致，但返回结果截然不同。

正常运行的Python请求代码 #

import requests
import json
data = {
    'act': '',
    'pw': '',
    'req': 'grades',
}

response = requests.post('http://127.0.0.1:5000/', data=data)
print(response.text)

运行异常的React Fetch代码 #

useEffect(() => {
    fetch('http://127.0.0.1:5000/', {
        method: 'POST',
        body: new URLSearchParams({
            'act': '',
            'pw': '',
            'req': 'grades'
        })
    }).then(response => {
        console.log('Response:', response)
        return response.json();
    }).then(response => console.log(response))
}, []); 

问题原因与解决方法 #

1. 缺少Content-Type请求头 #

Python的requests.post在传入data参数时，会自动设置Content-Type: application/x-www-form-urlencoded请求头，Flask端依赖这个头来识别表单数据并通过request.form获取参数。而React的Fetch使用URLSearchParams时，部分浏览器不会自动添加这个头，导致Flask无法正确解析参数。

解决办法：给Fetch请求手动添加请求头：

useEffect(() => {
    fetch('http://127.0.0.1:5000/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: new URLSearchParams({
            'act': '',
            'pw': '',
            'req': 'grades'
        })
    }).then(response => {
        console.log('Response:', response)
        return response.json();
    }).then(response => console.log(response))
}, []); 

2. 跨域资源共享（CORS）问题 #

如果React应用运行在和Flask不同的端口（比如React默认3000，Flask默认5000），浏览器会触发跨域限制，导致请求被拦截。

解决办法：在Flask项目中启用CORS：

• 首先安装依赖：pip install flask-cors
• 在Flask代码中添加配置：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # 允许所有来源的跨域请求

# 后续的API路由定义...

3. 确认Flask端参数获取方式 #

确保Flask代码中是通过request.form来获取POST参数，而不是request.json。例如：

from flask import request, jsonify

@app.route('/', methods=['POST'])
def handle_request():
    act = request.form.get('act')
    pw = request.form.get('pw')
    req = request.form.get('req')
    # 后续逻辑处理...
    return jsonify({'status': 'success', 'data': ...})

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