Flask+React蔬菜零售价格预测项目中已配置flask-cors仍出现CORS跨域错误的解决问询

看起来你遇到的是典型的跨域资源共享（CORS）问题，虽然已经配置了flask-cors，但可能有些细节没处理到位。咱们一步步排查解决：

1. 检查Flask-CORS的全局配置是否覆盖到蓝图路由 #

你给全局Flask应用加了CORS(server)，但注册的蓝图路由可能没被这个全局配置覆盖到。可以试试两种方式：

方式一：修改全局CORS配置，指定覆盖所有路由 #

把全局CORS初始化改成：

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

这样会让所有路由都允许跨域请求。

方式二：给蓝图路由单独添加跨域装饰器 #

在你的蓝图路由函数上，显式加上@cross_origin()装饰器，比如：

from flask_cors import cross_origin

@lstm_price_blueprint.route('/vegetable', methods=['POST'])
@cross_origin()  # 添加这个装饰器
def predict_vegetable_price():
    # 调用get_tomato_prediction的逻辑
    # ...

2. 确保预检OPTIONS请求被正确处理 #

浏览器在发送POST等非简单请求前，会先发送OPTIONS预检请求。你需要确保路由允许OPTIONS方法，或者让Flask-CORS自动处理它：

• 可以在路由的methods参数里显式加上OPTIONS：

  @lstm_price_blueprint.route('/vegetable', methods=['POST', 'OPTIONS'])
  

• 或者确认Flask-CORS的版本是最新的（旧版本可能对OPTIONS处理有问题），运行pip install --upgrade flask-cors更新。

3. 统一请求的域名/地址 #

注意到你React里用的是http://127.0.0.1:5000，而Flask运行的地址如果是localhost:5000，这在浏览器的同源策略里是不同的源（虽然指向同一台机器，但域名字符串不匹配）。

解决方法：把React里的BASE_URL改成和Flask完全一致的地址，比如都用http://localhost:5000或者都用http://127.0.0.1:5000。

4. 优化React的Fetch请求配置 #

给Fetch请求加上显式的mode: 'cors'，同时添加响应状态检查，方便排查问题：

export const getPredictedPrice = async (centreName, pDate, vegetable) => {
    try {
        let price_prediction = await fetch(
            `${BASE_URL}/vegetable`,
            {
                method: "POST",
                mode: 'cors',  // 显式指定跨域模式
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ centre: centreName, date: pDate, commodity: vegetable })
            }
        );

        // 先检查响应是否成功
        if (!price_prediction.ok) {
            throw new Error(`请求失败，状态码：${price_prediction.status}`);
        }

        let result = await price_prediction.json();
        return result;
    } catch (error) {
        console.log("API调用错误：", error);
        throw error;  // 抛出错误让上层处理
    }
};

5. 检查后端路由的异常处理 #

你的get_tomato_prediction方法里，如果找不到匹配的centre_name和date，会抛出IndexError，导致后端返回500错误，这也会让前端拿到undefined并报错。给方法加个异常处理：

def get_tomato_prediction(self, centre_name, date):
    Data = pd.read_csv('lstm_price_prediction_tomato.csv')
    try:
        pred_price = Data.loc[(Data['centre_name'] == centre_name) & (Data['date'] == date), 'predicted_retail_price'].values[0]
        result = { 'predicted_retail_price': pred_price }
        return jsonify(result)
    except IndexError:
        # 找不到数据时返回404和错误信息
        return jsonify({"error": "未找到该市场和日期的预测数据"}), 404

6. 验证Flask-CORS是否正确安装 #

确保你已经正确安装了flask-cors，可以运行pip show flask-cors查看版本，如果没安装就运行pip install flask-cors。

按照上面的步骤逐一排查，应该能解决你的CORS问题和后续的undefined报错。

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