React+Axios发送GET请求无法访问Flask后端，报404错误求助

核心排查思路 & 解决方案 #

404错误本质就是前端请求的URL和后端定义的路由完全不匹配，咱们一步步拆解问题：

1. 先核对请求URL是否完全一致 #

• 前端Axios的请求路径要和Flask路由丝毫不差，包括路径层级、大小写、参数格式（如果有）。比如：
  • Flask路由是@app.route('/api/get-data')，前端就不能写成/api/getData或者/get-data；
  • 如果前端跑在localhost:3000，后端在localhost:5000，要么在Axios里写完整跨域地址：axios.get('http://localhost:5000/api/get-data')，要么在React项目的package.json里加"proxy": "http://localhost:5000"，这样就能直接写/api/get-data。

2. 确认Flask路由的请求方法匹配 #

• Flask的@app.route默认只支持GET请求，但如果你的路由手动限制了方法，一定要确保包含GET：

  # 正确的GET路由写法
  @app.route('/api/get-data', methods=['GET'])
  def get_data():
      return jsonify({"status": "success"})
  

3. 检查跨域（CORS）配置是否到位 #

• 跨域请求如果没配置CORS，浏览器会拦截请求，有时候也会表现为404（尤其是OPTIONS预检请求失败时）。可以用flask-cors快速解决：

  from flask import Flask, jsonify
  from flask_cors import CORS
  
  app = Flask(__name__)
  CORS(app)  # 开发环境允许所有跨域，生产环境可指定具体域名
  
  @app.route('/api/get-data')
  def get_data():
      return jsonify({"data": "test content"})
  

4. 盯着Flask控制台的错误信息找线索 #

• 你提到Flask控制台有错误输出，重点看里面的请求路径——比如控制台显示"GET /wrong-path HTTP/1.1" 404，那直接把前端的请求URL改成/wrong-path对应的正确路由就行。

完整示例参考 #

Flask后端代码

from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/api/user-info', methods=['GET'])
def get_user_info():
    return jsonify({"name": "Alice", "email": "alice@example.com"})

if __name__ == '__main__':
    app.run(debug=True)

React前端代码（Axios）

import axios from 'axios';

const fetchUser = async () => {
  try {
    // 直接写完整地址，或者配置proxy后写相对路径
    const response = await axios.get('http://localhost:5000/api/user-info');
    console.log('请求结果:', response.data);
  } catch (error) {
    console.error('请求失败:', error.message);
  }
};

// 调用请求函数
fetchUser();

总结 #

优先从URL匹配和跨域配置这两个点排查，再结合Flask控制台的具体错误路径定位，基本就能解决404问题啦。

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