使用Flask+React连接前后端时遇控制台错误求助

我跟着YouTube教程搭建基于Flask和React的Web应用，跳过虚拟环境后代码能正常编译，但控制台一直报错，拿不到预期的成员数据。

后端代码 #

from flask import Flask

app= Flask(__name__)

# Members API Route
@app.route("/members")
def menbers():
    return {"members": ["Member1","Member2","Member3"]}


if __name__ =="__main__":
    app.run(host='0.0.0.0')

前端代码 #

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState([{}]);

  useEffect(() => {
    fetch("/members")
      .then(res => res.json())
      .then(data => {
        setData(data);
        console.log(data);
      });
  }, []);

  return (
    <div>
      {data.map((member, index) => (
        <div key={index}>{/* Render member data here */}</div>
      ))}
    </div>
  );
}

export default App;

控制台报错截图 #

问题排查与解决步骤 #

1. 修复后端函数名拼写错误
   后端路由对应的函数名写成了menbers，正确应该是members，这会导致请求/members时返回404。修正后的后端代码：

   from flask import Flask
   
   app= Flask(__name__)
   
   # Members API Route
   @app.route("/members")
   def members():  # 修正拼写错误
       return {"members": ["Member1","Member2","Member3"]}
   
   
   if __name__ =="__main__":
       app.run(host='0.0.0.0')
   

2. 解决跨域请求拦截问题
   Flask默认运行在5000端口，React默认在3000端口，浏览器会拦截跨域请求。需要安装并配置flask-cors：

   • 安装依赖：pip install flask-cors
   • 修改后端代码添加跨域支持：

     from flask import Flask
     from flask_cors import CORS
     
     app= Flask(__name__)
     CORS(app)  # 允许所有跨域请求
     
     # Members API Route
     @app.route("/members")
     def members():
         return {"members": ["Member1","Member2","Member3"]}
     
     
     if __name__ =="__main__":
         app.run(host='0.0.0.0')
     

3. 修正前端数据处理逻辑
   接口返回的是{"members": [...]}格式的对象，直接对data调用map会报错。同时初始状态设为[{}]不合理，改成空数组更合适：

   import React, { useState, useEffect } from 'react';
   
   function App() {
     const [members, setMembers] = useState([]);  // 初始化为空数组
   
     useEffect(() => {
       fetch("http://localhost:5000/members")  // 明确指定后端地址
         .then(res => res.json())
         .then(data => {
           setMembers(data.members);  // 提取members数组
           console.log(data.members);
         })
         .catch(err => console.error("请求出错：", err));  // 添加错误捕获
     }, []);
   
     return (
       <div>
         {members.map((member, index) => (
           <div key={index}>{member}</div>  // 渲染每个成员名称
         ))}
       </div>
     );
   }
   
   export default App;
   

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