React请求Flask API遭CORS拦截：已配置仍报错求解决

错误含义 #

这个错误是浏览器跨域安全机制的拦截提示：你的前端运行在http://localhost:3000，请求的API属于外部域名（ngrok生成的地址），属于跨域请求范畴。浏览器要求目标API服务器必须返回Access-Control-Allow-Origin头，明确允许http://localhost:3000发起请求，但当前服务器返回的响应（尤其是重定向后的响应）中缺少这个头，因此浏览器拦截了请求。

从错误日志能看到关键细节：你发起的是http://2483-103-79-250-41.ngrok-free.app/check请求，但被自动重定向到了HTTPS地址——重定向后的响应大概率丢失了Flask配置的CORS头，这是问题核心。

问题排查 #

1. ngrok默认重定向行为：ngrok会强制将所有HTTP请求重定向到HTTPS，前端发起的HTTP请求被转至HTTPS后，重定向流程可能未携带Flask设置的CORS头。
2. Flask CORS配置细节：虽然你指定了允许的源，但字符串形式的origins在部分场景下可能不如数组形式可靠；另外重定向请求可能未被CORS中间件正确处理。

解决方法 #

1. 直接使用HTTPS地址发起请求 #

修改React代码，直接用HTTPS的ngrok地址调用API，避免触发重定向：

const checkApi = async (fetchUri) => {
    try {
        // 确保fetchUri为HTTPS开头，例如"https://2483-103-79-250-41.ngrok-free.app"
        let uri = `${fetchUri}/check`
        const rawRes = await fetch(uri)
        const res = await rawRes.json()
        if (res.status == "ok") {
            localStorage.setItem("@uri", String(fetchUri))
            setUri(fetchUri)
            if(user.exists){
                navigate("/app")
            }else{
                navigate("/login")
            }
            return
        }
        clearBadUri()
    } catch (error) {
        clearBadUri()
    }
}

2. 优化Flask的CORS配置 #

• 改用数组形式指定允许的源，确保配置生效：

  CORS(app, origins=["http://localhost:3000"])
  

• 若需临时测试（生产环境禁止），可放宽限制：

  CORS(app, origins="*")
  

• 给特定路由单独配置CORS，确保路由被正确覆盖：

  from flask_cors import cross_origin
  
  @app.route("/check", methods=["GET"])
  @cross_origin(origins="http://localhost:3000")
  def check():
      return {
          "status":"ok"
      }
  

3. 验证CORS头是否正确返回 #

使用curl命令测试API是否返回正确的CORS头：

curl -H "Origin: http://localhost:3000" -I https://2483-103-79-250-41.ngrok-free.app/check

如果响应头包含Access-Control-Allow-Origin: http://localhost:3000，说明配置生效；若未出现，检查Flask的CORS中间件是否正确初始化。

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