React+Flask项目刷新页面后出现403 Forbidden错误求助

问题现象 #

React应用首次打开运行正常，但执行任意刷新操作后会触发403 Forbidden错误，后端基于Python Flask开发，运行环境为Mac M2。

当前后端CORS配置 #

CORS(app, resources={r"/*": {"origins": ["http://localhost:3000","http://127.0.0.1:3000/"]}})
socketio = SocketIO(app, cors_allowed_origins="*") 

解决方案 #

1. 统一Origin格式 #

配置中http://127.0.0.1:3000/多了末尾斜杠，与localhost格式不一致，浏览器刷新后发送的Origin可能不带斜杠，导致匹配失败。修改为统一格式：

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

2. 确保预检请求（OPTIONS）正常处理 #

Flask-CORS默认处理OPTIONS请求，但如果存在自定义路由拦截OPTIONS，需手动放行：

from flask import make_response

@app.route('/', methods=['OPTIONS'])
def handle_options():
    response = make_response()
    response.headers.add("Access-Control-Allow-Origin", "*")
    response.headers.add('Access-Control-Allow-Headers', "*")
    response.headers.add('Access-Control-Allow-Methods', "*")
    return response

3. 排查SocketIO与主CORS配置冲突 #

临时将主CORS配置设为允许所有Origin，验证是否为Origin匹配问题：

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

测试正常后再缩小Origin范围。

4. 适配React路由模式（BrowserRouter） #

若React使用BrowserRouter，刷新时浏览器会直接请求后端对应路径，Flask需配置兜底路由返回React的index.html：

from flask import send_from_directory

@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def catch_all(path):
    # 路径需替换为你的React构建文件目录
    return send_from_directory('../frontend/build', 'index.html')

5. 清除浏览器缓存 #

刷新后浏览器可能缓存旧的CORS响应头，使用Cmd+Shift+R（Mac）强制清除缓存后再测试。

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