Flask与React前端间API跨域（CORS）错误排查求助

这个问题的核心是浏览器同源策略限制：本地React开发服务器（一般是localhost:3000）和Heroku上的Flask API属于不同域名，浏览器会拦截跨域请求，除非后端明确通过CORS头允许该源访问。Postman不受同源策略约束，所以能正常请求。

修复步骤： #

1. 安装Flask-CORS扩展
   在你的Flask项目环境中执行：

pip install flask-cors

同时将flask-cors添加到requirements.txt文件中（确保Heroku部署时能安装该依赖）。

2. 在Flask中配置CORS
   修改你的Flask代码，导入并启用CORS：

from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
# 开发阶段允许所有源访问（生产环境建议指定具体前端域名）
CORS(app)

@app.route("/api/", methods=["GET"])
def get_country_info():
    # some processing
    return jsonify(data)

如果是生产环境，为了安全性，建议指定允许的前端域名：

# 示例：允许本地开发服务器和线上React域名
CORS(app, origins=["http://localhost:3000", "https://your-react-production-domain.com"])

3. 重新部署Flask应用到Heroku
   将修改后的代码和更新的requirements.txt推送到Heroku，确保新的配置生效。

额外注意： #

错误中的308状态码是永久重定向，可能是请求URL和Flask路由不匹配（比如请求用了/api而路由是/api/）。确认React请求的URL和Flask路由保持一致即可。

内容的提问来源于stack exchange，提问作者Adrian Puşcuţă