React应用无法从Flask后端获取数据，求助解决

先确认Flask服务是否正常 #

• 直接在浏览器访问你的Flask接口（比如http://localhost:5000/api/data），看是否能返回预期的JSON数据。
• 如果接口无响应或返回错误，先修正Flask代码，确保路由和返回格式正确：

  from flask import Flask, jsonify
  
  app = Flask(__name__)
  
  # 示例接口，替换成你的业务逻辑
  @app.route('/api/data')
  def send_data():
      return jsonify({"content": "这是来自Flask的数据"})
  
  if __name__ == '__main__':
      # 用0.0.0.0启动，避免React proxy访问受限
      app.run(host='0.0.0.0', debug=True)
  

修正React请求逻辑 #

• 确保在App.js里用正确的方式发起请求并更新状态，示例代码：

  import { useState, useEffect } from 'react';
  
  function App() {
    const [flaskData, setFlaskData] = useState(null);
    const [reqError, setReqError] = useState(null);
  
    useEffect(() => {
      // 借助proxy，直接写相对路径即可
      fetch('/api/data')
        .then(response => {
          // 先检查请求是否成功
          if (!response.ok) throw new Error(`请求失败：${response.status}`);
          return response.json();
        })
        .then(data => setFlaskData(data))
        .catch(error => setReqError(error.message));
    }, []);
  
    return (
      <div>
        {flaskData ? <p>获取到的数据：{flaskData.content}</p> : <p>加载中...</p>}
        {reqError && <p style={{color: 'red'}}>错误：{reqError}</p>}
      </div>
    );
  }
  
  export default App;
  

验证Proxy配置有效性 #

• 确认package.json里的proxy是顶层字段，格式正确：

  {
    "name": "your-react-app",
    "version": "0.1.0",
    "proxy": "http://localhost:5000",
    // 其他配置字段...
  }
  

• 修改proxy后必须重启React开发服务器，否则配置不会生效。

常见问题排查 #

• 检查浏览器控制台的Network标签，查看请求的状态码：
  • 404：React请求路径和Flask路由不匹配，确认两边路径一致
  • 500：Flask服务内部错误，查看Flask控制台的报错信息
  • 跨域错误：如果proxy失效，安装flask-cors库解决：

    pip install flask-cors
    

    然后在Flask代码中添加：

    from flask_cors import CORS
    CORS(app)  # 允许所有跨域请求
    

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