已引入flask_cors，React调用Flask仍报CORS错误如何解决？

问题概述 #

尝试从React向Flask后端发送POST请求时，遭遇CORS跨域策略阻止，无法正常获取响应。

报错信息 #

浏览器报错：
从源 'http://localhost:3000' 访问 'http://127.0.0.1:5000/api/data' 时被CORS策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在 'Access-Control-Allow-Origin' 标头。
ShortPage.jsx:24 AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}

相关代码 #

React代码 #

const data = {
    name: 'John',
    email: 'john@example.com'
};

axios.post('http://127.0.0.1:5000/api/data', data)
    .then(response => {
        console.log(response);
    })
    .catch(error => {
        console.log(error);
    });

Flask代码 #

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app, origins='http://localhost:3000')

@app.route('/api/data', methods=['POST'])
def process_data():
    data = request.get_json()
    # 数据处理
    response_data = {'message': 'Sucsess'}
    return jsonify(response_data), 200

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

解决方法 #

1. 修正CORS配置，覆盖预检请求 #

原配置虽指定了允许的源，但可能未正确处理预检请求。可修改配置参数，或给目标路由单独添加跨域装饰器：

from flask import Flask, request, jsonify
from flask_cors import CORS, cross_origin

app = Flask(__name__)
# 配置允许指定源，并支持凭证及预检请求
CORS(app, origins='http://localhost:3000', supports_credentials=True)

@app.route('/api/data', methods=['POST'])
@cross_origin()  # 给该路由单独添加跨域支持
def process_data():
    data = request.get_json()
    # 数据处理
    response_data = {'message': 'Success'}  # 修正拼写错误
    return jsonify(response_data), 200

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

2. 测试阶段允许所有源（生产环境禁用） #

若不确定是源匹配问题，可暂时允许所有源验证：

# 替换原CORS配置行
CORS(app)

验证请求正常后，再改回指定源的配置，保障生产环境安全。

3. 修正代码拼写错误 #

原Flask代码中'Sucsess'为拼写错误，修正为'Success'，避免后续逻辑或前端解析异常。

4. 确认请求地址一致性 #

确保React请求地址http://127.0.0.1:5000/api/data与Flask运行地址完全匹配，若Flask修改过端口或地址，需同步更新React中的请求URL。

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