CORS error while trying to access Flask API

I have a React front end and Flask Backend. There’s a Long-Running Task in the Back end which is gonna start when I submit the Job from the Front end. I assigned 2 Buttons on the front end to Submit the Job and the Other One to Check the status of the Job and Retrieve Data if the Job Is Finished.

Front End Job Submit Function

    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);
    }
    };

Front End Check Job Status Function

    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);
        }
    }

In the Flask Back End, I have 2 Functions corresponds to the 2 Front End Functions

Backend Handle Job Submit Function

@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

Backend Handle Check Job Status Function

@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

Import ‘cross_origin’ from flask_cors import cross_origin

PROBLEM:
When I Assigned the 2 Functions to the 2 Buttons Separately Everything works fine As Expected. However, If I try to call the Check status Function with the Job submit Function Like this,

    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);
    }
    };

This gives the CORs error.

Access to XMLHttpRequest at ‘http://localhost:8000/get-result/’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Can someone help me figure out why this is Happening?

Answer

Try to use the @cross_origin decorator without any arguments. As it’s written in the Documentation:

In the simplest case, simply use the default parameters to allow all origins in what is the most permissive configuration

Also headers is not a valid parameter for this decorator. You might want to use allow_headers.