React.js+Flask+AWS架构下Fetch请求失败问题求助

以下是针对你遇到的TypeError: Failed to fetch问题的具体排查方向，按顺序逐一验证：

• 确认Flask的CORS配置是否完全生效
  别只看有没有加CORS依赖，要检查初始化逻辑：

  • 确保全局启用CORS，而不是仅给单个路由配置：

    from flask import Flask
    from flask_cors import CORS
    
    app = Flask(__name__)
    # 全局允许localhost:3000的跨域请求
    CORS(app, origins=["http://localhost:3000"])
    

  • 启动Flask后，观察控制台日志，当前端触发请求时，是否有OPTIONS预请求的记录，且状态码为200。如果OPTIONS返回403/404，说明CORS配置未正确覆盖该路由。

• 检查Fetch请求的URL与参数配置

  • 统一请求URL的域名格式：要么全用http://localhost:5000，要么全用http://127.0.0.1:5000，避免跨域时的域名解析差异
  • 显式指定mode: 'cors'，并确保请求头与后端预期一致（比如POST请求要加Content-Type: application/json）：

    // 示例POST请求
    const sendData = async () => {
      try {
        const res = await fetch('http://localhost:5000/api/get-db-data', {
          method: 'POST',
          mode: 'cors',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ query: 'your-query' })
        });
        const data = await res.json();
        console.log(data);
      } catch (err) {
        console.error('请求失败:', err);
      }
    };
    

  • 核对后端路由的HTTP方法：比如后端是@app.post('/api/get-db-data')，前端就不能用GET请求。

• 验证Flask后端自身的可用性

  • 直接在浏览器或Postman中访问Flask的端点（比如http://localhost:5000/api/get-db-data），确认后端能正常返回数据，而不是仅测试AWS端点——问题出在前后端交互环节，和后端到AWS的连接无关。
  • 如果Flask返回500错误，前端的Fetch会直接抛出Failed to fetch，此时要查看Flask的错误日志，定位后端代码的问题（比如处理AWS数据时的异常）。

• 查看浏览器网络请求详情
  打开浏览器开发者工具（F12）→ Network标签，触发请求后：

  • 查看请求的状态码：如果是404，说明路由路径写错；如果是403，CORS配置有问题；如果是500，后端代码报错。
  • 查看Request Headers里的Origin字段，是否和Flask CORS配置的origins一致。
  • 查看Response的内容，即使控制台报Fetch错误，也可能能看到后端返回的具体错误信息。

• 排查本地环境干扰

  • 关闭本地防火墙、VPN或代理工具，这些可能会拦截localhost的跨域请求。
  • 确保Flask确实在127.0.0.1:5000运行，没有被其他程序占用端口。

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