reactjs - 尝试访问 Flask API 时出现 CORS 错误

问题描述

我有一个 React 前端和 Flask 后端。当我从前端提交作业时，后端有一个长时间运行的任务。我在前端分配了 2 个按钮来提交作业，另一个用于检查作业的状态并在作业完成时检索数据。

前端作业提交功能

    const sendSubmitRequest = async () => {
    try {
        const resp = await axios.get('http://localhost:8000/submit-job/'+embedId);
        if (resp.status === 202) {
            setTaskId(resp.data.task_id)
            console.log(resp.data);
            alert("Job Submision Success..")
            console.log("Job Submitted Successfully...")
        } else {
            alert("Job Submision Failed... \nCheck If the Video URL Is Correct")
        }

    } catch (err) {
        // Handle Error Here
        console.error(err);
    }
    };

前端检查作业状态功能

    const checkJobStatusTime = async () => {
        let refreshId = null
        try {
            const refreshId = setInterval(async () => {
                const resp = await axios.get('http://localhost:8000/get-result/'+taskId);
                if (resp.status === 200 && resp.data.status === 'success') {
                    const resl = resp.data.result;
                    console.log(resl)
                    setData(resl);
                    alert("Data Retrieved Successfully...")
                    clearInterval(refreshId);
                }
                else if(resp.status === 200 && resp.data.status === 'not_found') {
                    clearInterval(refreshId);
                } else {
                    console.log("Job Still Runing...")
                    
                }
            }, 3000);
        } catch(e) {
            console.log(e);
            clearInterval(refreshId);
        }
    }

在 Flask 后端，我有 2 个函数对应于 2 个前端函数

后端处理作业提交功能

@app.route('/submit-job/<video_id>')
@cross_origin(origin='*', headers=['Content-Type', 'Authorization'])
def handle_submit(video_id):
    job_id = id_generator()
    executor.submit_stored(job_id, test_func, video_id)
    return jsonify({'status': 'success', 'task_id': job_id, 'message': 'Job Submitted Successfully'}), 202

后端句柄检查作业状态功能

@app.route('/get-result/<task_id>')
@cross_origin(origin='*', headers=['Content-Type', 'Authorization'])
def get_result(task_id):
    
    if task_id in executor.futures._futures.keys():
        if executor.futures.done(task_id):
            future = executor.futures.pop(task_id)
            return jsonify({'status': 'success',
                            'message': 'Job Completed Successfully',
                            'result': future.result()}), 200
        else:
            return jsonify({'status': executor.futures._state(task_id),
                            'message': 'Job Still Running',
                            'result': None}), 200
    else:
        return jsonify({'status': 'not_found',
                            'message': 'Task Id Cannot be Found.',
                            'result': None}), 200

导入'cross_origin' from flask_cors import cross_origin

问题：
当我将 2 个功能分别分配给 2 个按钮时，一切都按预期正常工作。但是，如果我尝试像这样使用作业提交功能调用检查状态功能，

    const sendSubmitRequest = async () => {
    try {
        const resp = await axios.get(endPoint+'/youtube/submit-job/'+embedId);
        if (resp.status === 202) {
            setTaskId(resp.data.task_id);
            console.log("Job Submitted Successfully...")
            
            // Calling the Status Check Function
            checkJobStatusTime();
            
        } else {
            alert("Job Submision Failed... \nCheck If the Video URL Is Correct")
        }

    } catch (err) {
        // Handle Error Here
        console.error(err);
    }
    };

这给出了 COR 错误。

从源“http://localhost:3000”访问“http://localhost:8000/get-result/”处的 XMLHttpRequest 已被 CORS 策略阻止：不存在“Access-Control-Allow-Origin”标头请求的资源。

有人可以帮我弄清楚为什么会这样吗？

标签： reactjsflask

reactjs - 尝试访问 Flask API 时出现 CORS 错误

问题描述

解决方案

推荐阅读