React中使用Fetch调用Flask接口无法获取正确数据的问题排查

1. 修正代理配置错误 #

你提到在package.json中设置了localhost:3000的代理，这是错误的。React开发服务器默认运行在3000端口，代理需要指向Flask后端的端口（默认是5000）。修改package.json：

"proxy": "http://localhost:5000"

修改后重启React开发服务器，确保代理生效。

2. 验证Flask后端状态 #

• 确保Flask服务器正在运行：在server.py所在目录执行python server.py或flask run，控制台会显示类似Running on http://127.0.0.1:5000的日志。
• 直接在浏览器访问http://localhost:5000/news，检查是否能返回正常的JSON数据。如果这里报错，先修复后端问题：
  • 你的NewsAPI请求URL存在语法错误：末尾多了一个括号，修正为：

    response = requests.get('https://newsapi.org/v2/everything?language=en&q=games&apiKey=[API KEY]')
    

  • 替换[API KEY]为你实际的NewsAPI密钥。
  • 循环取12条数据时，注意data['articles']可能不足12条，建议先判断长度避免索引错误：

    for article in data['articles'][:12]:
        authors.append(article['author'])
        titles.append(article['title'])
        descs.append(article['description'])
        urls.append(article['url'])
        urlToImages.append(article['urlToImage'])
        publish_dates.append(article['publishedAt'])
    

3. 测试API请求 #

暂时绕过React代理，直接请求后端完整地址，验证数据是否能正确获取：

useEffect(() => {
  fetch('http://localhost:5000/news')
  .then(res => {
    if (!res.ok) throw new Error('请求失败');
    return res.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error(err));
},[]);

如果这里能拿到JSON，说明代理配置仍有问题；如果还是拿不到，继续排查后端。

4. 清除缓存并重启服务 #

• 关闭React和Flask的所有进程，重新启动。
• 清除浏览器缓存，或使用无痕模式测试，避免缓存的旧页面干扰。

5. 检查端口冲突 #

如果Flask没有用默认的5000端口，比如你指定了其他端口（如app.run(port=5001)），需要同步修改package.json的代理地址为对应的端口。

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