React调用Flask接口提交任务后自动查询状态出现CORS错误如何解决

这个报错本质不是CORS配置错误，是状态更新异步导致请求URL不合法，触发Flask无CORS头的404响应，具体原因如下：

1. React的setTaskId是异步状态更新接口，调用后不会立刻修改当前作用域下的taskId变量值。你在setTaskId之后立即调用checkJobStatusTime时，函数内拼接请求URL用的taskId还是更新前的初始值（一般为undefined或者空值），最终请求的地址是http://localhost:8000/get-result/undefined或者直接是http://localhost:8000/get-result/。
2. 你Flask后端定义的查询路由是/get-result/<task_id>，要求必须带task_id路径参数，上面的不合法请求命中了Flask默认的404响应，而这个默认404响应没有附加cross_origin装饰器配置的跨域头，所以浏览器就抛出了CORS错误，掩盖了真实的路由不存在问题。

解决方法 #

有两种常用修复方案可选：

• 方案1：直接将获取到的taskId作为参数传递给查询函数，跳过对状态的依赖
  修改提交函数的调用逻辑：

// 提交任务成功后
const taskId = resp.data.task_id
setTaskId(taskId);
checkJobStatusTime(taskId); // 直接传参

对应修改查询函数，接收参数使用：

const checkJobStatusTime = async (taskId) => {
  // 原有逻辑不变，直接使用传入的taskId拼接URL即可
}

• 方案2：通过useEffect监听taskId状态更新，状态更新完成后再触发查询

// 单独加一个副作用监听taskId
useEffect(() => {
  // 只有taskId有有效值时才触发查询
  if (taskId) {
    checkJobStatusTime();
  }
}, [taskId])

提交成功后只需要调用setTaskId即可，不需要手动调用查询函数。

你可以打开浏览器控制台的「网络」标签，查看get-result请求的实际URL，就能确认是否是taskId未正确拼接的问题。

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