React调用Flask API遭遇CORS错误，多种尝试仍无法解决

你的核心问题出在两个地方：一是手动添加Access-Control-Allow-Origin请求头时没有指定具体源，二是虽然导入了flask-cors但从未真正启用它。以下是具体修复方案：

修复步骤 #

1. 确保已安装flask-cors #

如果还没安装，先执行：

pip install flask-cors

2. 二选一：全局启用CORS或使用路由装饰器 #

方案一：全局启用CORS（推荐开发环境快速验证）

修改Flask代码，在创建app实例后直接启用CORS，指定允许的源（你的React服务地址http://localhost:5173）：

from flask import Flask
from flask_cors import CORS
from flask import jsonify

app = Flask(__name__)
# 全局允许指定源的跨域请求
CORS(app, origins="http://localhost:5173")

@app.route("/", methods=["GET"])
def get_example():
    """GET in server"""
    return jsonify(message="Simple server is running")

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

方案二：针对单个路由启用CORS

如果只想给特定路由开跨域，用@cross_origin装饰器：

from flask import Flask
from flask_cors import cross_origin
from flask import jsonify

app = Flask(__name__)

@app.route("/", methods=["GET"])
@cross_origin(origins="http://localhost:5173")
def get_example():
    """GET in server"""
    return jsonify(message="Simple server is running")

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

3. 移除无效的手动header设置 #

删掉你代码中这一行：

response.headers.add("Access-Control-Allow-Origin")

这行代码没有赋值，完全无效，还可能和Flask-CORS的自动设置冲突。

验证方法 #

1. 重启Flask服务
2. 运行React应用，打开浏览器控制台，查看是否还存在CORS报错

注意事项 #

• 开发环境可以临时用CORS(app)允许所有源，但生产环境必须指定具体的业务域名，避免安全风险。
• 确认React和Flask的端口号正确（你的代码里是5173和5000，没问题）。

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