CORS error while trying to access Flask API - reactjs

Question

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 1

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.