为何Flask+React电影推荐系统的前端下拉菜单为空？

1. 接口路径不匹配 #

你的Flask后端仅配置了根路径/的路由，但React前端请求的是/titles，这会导致请求返回404错误，根本拿不到数据。

修复方式二选一：

• 把React的请求路径改为http://127.0.0.1:5000/
• 或者在Flask中新增/titles路由：

@app.route('/titles', methods=['GET'])
def get_titles():
    titles = [movie["original_title"] for movie in movies_final]
    return jsonify(titles)

2. no-cors模式限制响应读取 #

{mode: 'no-cors'}会让浏览器强制限制JS读取响应内容，哪怕请求成功，res.json()也会失败，因为浏览器不会暴露响应数据给前端代码。

修复方式：
移除fetch的no-cors配置：

fetch('http://127.0.0.1:5000/titles')
  .then(res => res.json())
  // ... 后续代码不变

3. 跨域请求被浏览器拦截 #

浏览器默认阻止不同端口的跨域请求，Flask需要配置CORS才能允许React的请求。

修复方式：

1. 安装Flask-CORS依赖：

pip install flask-cors

2. 修改Flask代码启用CORS：

from flask import Flask, jsonify, request
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # 允许所有跨域请求

# 后续路由代码保持不变

4. 数据处理逻辑错误 #

Flask返回的是纯字符串数组（比如["肖申克的救赎", "阿甘正传"]），但你用Object.entries(data)去处理数组，这会生成错误的结构，最终导致moviesList为空数组。

修复方式：
直接遍历数组生成电影对象：

.then(data => {
  const moviesList = data.map((title, index) => ({ id: index, title }));
  console.log(moviesList);
  setMovies(moviesList);
})

调试建议 #

• 打开浏览器开发者工具（F12），查看「网络请求」标签页，确认请求的状态码和响应内容
• 查看「控制台」标签页，排查是否有未捕获的报错信息

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