React+Flask部署后CORS跨域请求被拦截问题求助

核心问题排查与修复步骤 #

1. 清理冗余配置，避免规则冲突 #

你同时使用了全局CORS(app)配置和路由上的@cross_origin装饰器，两种规则叠加容易导致CORS校验逻辑混乱。建议保留全局配置覆盖所有路由，删除路由上的@cross_origin装饰器。

2. 移除本地测试工具flask_ngrok #

run_with_ngrok(app)是本地开发时用来临时暴露服务的工具，部署到o2switch服务器后，它会生成和你的正式域名http://app.prot.sc1i.un.wf不一致的临时域名，直接触发CORS错误，必须删除这行代码。

3. 正确处理OPTIONS预检请求 #

浏览器发送POST请求前会先发送OPTIONS预检请求，你的自定义options(self)方法没有注册为路由，无法响应预检。可以通过全局配置自动处理，或手动在路由中添加OPTIONS支持。

修改后的完整Flask代码 #

from calcul import Calcul, CoefficientCM
import pandas as pd

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

app = Flask(__name__)
# 全局CORS配置，精准匹配你的前端域名
CORS(app, 
     resources={r"/*": {
         "origins": "http://app.prot.sc1i.un.wf",
         "supports_credentials": True,
         "allow_headers": "*",
         "expose_headers": "*"
     }})
app.config['CORS_HEADERS'] = 'Content-Type'

@app.route('/calcul', methods=['POST', 'OPTIONS'], strict_slashes=False)
def main():
    if request.method == 'OPTIONS':
        # 直接返回成功响应处理预检请求
        return jsonify({'status': 'ok'}), 200
    # 处理POST业务逻辑
    response_data = request.get_json()
    # 这里补充你的计算逻辑，最后返回结果
    return jsonify({'result': 'your calculation output'}), 200

额外验证点 #

• 打开Chrome开发者工具的网络面板，查看请求的Origin头，确保和配置的origins完全一致（注意区分http/https、端口号）。
• 确认服务器上的Flask应用绑定的是公网地址，而非本地127.0.0.1。
• 如果前端需要传递Cookie等凭证，确保请求库（如axios）设置了withCredentials: true。

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