Flask配置CORS仍报错：缺少Access-Control-Allow-Origin响应头

核心问题原因 #

你同时使用了Flask-CORS和自定义的after_request函数添加CORS响应头，这会导致以下冲突：

1. Flask-CORS已经自动处理OPTIONS预检请求并添加标准CORS头，手动添加的头会重复或覆盖正确的响应头
2. response.headers.add()会导致同一个Access-Control-Allow-Origin头多次出现，浏览器会直接忽略这类非法响应头，触发CORS报错

修复步骤 #

1. 移除自定义的after_request函数 #

修改__init__.py，删除整个@app.after_request装饰的函数块，保留Flask-CORS的配置即可：

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask_bcrypt import Bcrypt
from flask_cors import CORS

db = SQLAlchemy()
bcrypt = Bcrypt()

def create_app():
    app = Flask(__name__)
    app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///users.db'
    app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
    app.secret_key = 'supersecretkey'

    db.init_app(app)
    bcrypt.init_app(app)

    # 简化CORS配置，仅允许指定源的跨域请求，支持凭证
    CORS(app, origins="http://localhost:3000", supports_credentials=True)

    from .routes import main
    app.register_blueprint(main)

    return app

2. 验证Flask应用启动方式 #

确保你是通过工厂函数create_app()创建的应用实例，启动文件示例：

from your_app_module import create_app

app = create_app()

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

3. 手动测试OPTIONS预检请求 #

用curl命令验证CORS头是否正常返回：

curl -X OPTIONS http://localhost:5000/test \
  -H "Origin: http://localhost:3000" \
  -H "Access-Control-Request-Method: GET" \
  -v

如果响应头中包含Access-Control-Allow-Origin: http://localhost:3000，说明配置生效。

4. 前端可选配置（如需凭证） #

如果你的请求需要携带Cookie等凭证，在axios请求中开启withCredentials：

axios.get('http://localhost:5000/test', { withCredentials: true })
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

额外排查建议 #

• 升级Flask-CORS到最新版本：pip install --upgrade flask-cors
• 检查是否有其他Flask扩展或中间件修改了响应头
• 确保后端服务确实运行在http://localhost:5000，前端运行在http://localhost:3000，端口无冲突

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