Flask与React联调遇405 Method Not Allowed错误求助

问题根源 #

你把Flask和React开发服务器都设为5173端口是核心问题——同一端口只能被一个服务占用，此时浏览器访问的http://127.0.0.1:5173/api/calculate_feed实际是React开发服务器在响应，它根本没有这个POST路由，所以返回405 Method Not Allowed错误，Axios请求自然也失败。

分步解决方案 #

1. 给Flask更换独立端口 #

修改Flask代码的启动端口，比如换成常用的5000：

if __name__ == '__main__':
    app.run(debug=True, port=5000)  # 把5173改成5000

2. 配置React开发代理 #

在React项目的package.json文件末尾添加代理配置，让React自动转发API请求到Flask服务：

{
  // ... 其他原有配置
  "proxy": "http://127.0.0.1:5000"
}

这样Axios的/api/calculate_feed请求会自动转发到http://127.0.0.1:5000/api/calculate_feed，无需修改Axios代码。

3. 验证请求与服务状态 #

• 先启动Flask服务，确保控制台显示Running on http://127.0.0.1:5000
• 再启动React开发服务器（默认还是5173端口）
• 触发请求后，检查Flask控制台是否有请求日志，确认请求是否到达Flask

4. 额外排查点 #

• 确认get_feedstuff_for_hardcoded_animal函数能正常返回数据，可以在Flask的calculate_feed函数里加print(feedstuff_info)调试
• 检查Axios请求发送的参数是否正确：在handleAnimalClick里添加console.log({ animal_type: selectedAnimal, purpose:item })，确认参数存在且格式正确
• 若仍有CORS问题，可以细化Flask的CORS配置（比如指定允许的源）：

CORS(app, origins="http://127.0.0.1:5173")

内容的提问来源于stack exchange，提问作者Al-Amin Baba