Flask与React跨域CORS问题求助：缺失Access-Control-Allow-Origin头

问题背景 #

开发Flask应用向React前端传递计算结果时遭遇跨域拦截，尝试多种CORS配置均未生效。

已尝试的无效配置 #

• 给路由添加@cross_origin()装饰器
• 全局配置：CORS(app, resources={r"/*": {"origins": "*", "allow_headers": "*", "expose_headers": "*"}})
• 手动在响应中添加Access-Control-Allow-Origin: *头

代码示例 #

Flask 代码（原配置） #

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

app = Flask(__name__)
CORS(app, resources={r"/*": {"origins": "*", "allow_headers": "*", "expose_headers": "*"}})

@app.route('/')
@cross_origin()
def welcome():
    response = jsonify({'reply': 'Hello Webminers'})
    response.headers.add("Access-Control-Allow-Origin", "*")
    return response

初始React请求代码 #

console.log(axios.get('http://127.0.0.1:5000'))

修改后的React请求代码 #

axios.get('http://127.0.0.1:5000', {headers: {"Access-Control-Allow-Origin": "*"}}).then(response => {
        console.log(response.data);
    })

报错信息 #

初始请求报错 #

Access to XMLHttpRequest at 'http://127.0.0.1:5000/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Failed to load resource: net::ERR_FAILED

补充：将请求地址改为localhost:5000时，报错内容一致

修改请求后的新报错 #

Access to XMLHttpRequest at 'http://127.0.0.1:5000/' 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

有效解决步骤 #

1. 清理重复配置，保留单一全局CORS设置
   重复配置会导致冲突，简化Flask代码，只保留全局CORS初始化：

   from flask import Flask, jsonify
   from flask_cors import CORS
   
   app = Flask(__name__)
   # 全局允许所有跨域请求，覆盖所有路由
   CORS(app, origins="*", allow_headers="*", expose_headers="*")
   
   @app.route('/')
   def welcome():
       return jsonify({'reply': 'Hello Webminers'})
   

2. 移除前端请求中的Access-Control-Allow-Origin头
   这个头是服务器返回给浏览器的响应头，前端请求时不需要发送，否则会触发额外的OPTIONS预请求。修正后的React代码：

   axios.get('http://127.0.0.1:5000')
     .then(response => {
         console.log(response.data);
     })
     .catch(err => {
         console.error('请求失败:', err);
     });
   

3. 升级flask-cors依赖
   旧版本可能存在配置兼容问题，执行命令更新：

   pip install --upgrade flask-cors
   

4. 验证响应头是否生效
   直接在浏览器访问http://127.0.0.1:5000，打开开发者工具查看响应头，确认存在Access-Control-Allow-Origin: *。如果不存在，检查Flask应用是否正确导入并初始化了CORS。

5. 确认服务运行地址一致性
   确保Flask在http://127.0.0.1:5000正常运行，React在http://localhost:3000运行，两者均使用HTTP协议（避免混用HTTPS）。

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