已配置CORS仍遇跨域拦截：Flask+React前后端POST请求报错

错误信息 #

Access to XMLHttpRequest at 'http://127.0.0.1:5000/predict' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

问题原因 #

• 后端重复初始化CORS实例，导致配置冲突，正确的跨域响应头未被正常设置
• 前端请求错误添加了Access-Control-Allow-Origin请求头，该头属于响应头，应由后端返回，前端发送会干扰预请求校验逻辑

解决方案 #

1. 修正Flask后端CORS配置 #

删除重复的CORS(app)调用，保留一次完整的跨域配置：

from flask import Flask, request
import pandas as pd
from flask_cors import CORS

app = Flask(__name__)
# 配置所有路由允许任意来源的跨域请求
CORS(app, resources={r"/*": {"origins": "*"}})

@app.route('/predict', methods=['GET','POST'])
def home():
    df = pd.DataFrame(request.json["challenge"])
    # 你的业务处理逻辑
    result = ... # 替换为实际处理结果
    return pd.DataFrame.to_json(result)

if __name__ == '__main__':
    app.run(port=5000)

注意：如果未安装flask-cors依赖，先执行pip install flask-cors

2. 修正前端axios请求 #

移除多余的Access-Control-Allow-Origin请求头：

function getPrediction(data) {
  const sending = { challenge: fighters };
  axios.post('http://127.0.0.1:5000/predict', sending)
    .then((res) => {
      console.log(res);
    })
    .catch((err) => {
      console.error('请求失败:', err);
    });
}

可选优化（提升安全性） #

如果不需要开放所有来源访问，可将origins: "*"改为具体的前端域名，比如：

CORS(app, resources={r"/*": {"origins": "http://localhost:3000"}})

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