尝试访问 Flask API 时出现 CORS 错误答案

【问题标题】：CORS error while trying to access Flask API尝试访问 Flask API 时出现 CORS 错误
【发布时间】：2021-10-30 17:17:00
【问题描述】：

我有一个 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”标头存在于请求的资源上。

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

【问题讨论】：

标签： reactjs flask

【解决方案1】：

尝试使用不带任何参数的 @cross_origin 装饰器。正如Documentation中所写：

在最简单的情况下，只需使用默认参数以允许所有来源在最宽松的配置中

另外，headers 不是此装饰器的有效参数。您可能想使用allow_headers。

【讨论】：