如何高效连接 ReactJS 与 Flask API：全栈开发实战指南

2026-02-04 00:48:35 0条评论 1次阅读 0人点赞

在现代全栈 Web 开发的旅程中，将 ReactJS 这样的前沿前端框架与 Flask 这样灵活的 Python 后端结合起来，是一种非常强大且流行的架构模式。这种方法让我们能够发挥两者的最大优势：React 利用其虚拟 DOM 和组件化思维高效地构建动态用户界面，而 Flask 则轻量级地处理后端逻辑、数据库交互和 API 服务。

在这篇文章中，我们将深入探讨如何从零开始构建一个全栈应用。我们将学习如何让 React 前端通过 HTTP 请求与 Flask 后端进行通信，实现数据的获取与展示。这不仅仅是关于“让代码跑起来”，我们还将一起探讨背后的工作原理、最佳实践、常见的跨域问题（CORS）及其解决方案，以及如何通过代理（Proxy）优化开发环境。无论你是刚开始探索全栈开发，还是希望规范化现有项目的连接方式，这篇指南都将为你提供详尽的实操步骤和深度的技术见解。

0.1 准备工作与环境概览
0.2 步骤 1：构建 Flask 后端服务
0.3 步骤 2：搭建 React 前端应用

1 React 连接 Flask API 示例

准备工作与环境概览

为了确保我们的开发环境清晰且易于管理，我们建议采用“前后端分离”的项目结构。这意味着我们将为前端和后端分别创建独立的文件夹。这样做不仅有助于逻辑隔离，也便于后期的部署和维护。

我们的目标目录结构将如下所示：

/project-root
  |-- /backend   # Flask 应用存放于此
  |-- /frontend  # React 应用存放于此

技术栈核心

后端：我们将使用 Flask 创建一个 RESTful API。Flask 是一个微框架，非常适合快速构建 API 端点。我们将定义路由来处理请求并返回 JSON 格式的数据。
前端：我们将使用 React (Create React App) 构建用户界面。为了发送异步 HTTP 请求，我们将探讨两种主流方式：浏览器原生的 INLINECODE0f371935 API 以及强大的 INLINECODE527f826e 库。
通信桥梁：通过 HTTP 协议进行通信。React 发起 GET、POST 等请求，Flask 接收请求并返回响应。

步骤 1：构建 Flask 后端服务

首先，让我们专注于后端。我们将创建一个简单的 Flask 服务器，它模拟一个数据源。当被请求时，它将返回一些 JSON 格式的用户信息。

1.1 初始化项目

打开你的终端，执行以下命令来创建后端文件夹和必要的文件：

mkdir backend
cd backend
# 如果你使用的是 Mac 或 Linux，可以直接 touch
# 如果是 Windows，可以使用 type nul > server.py

为了保持代码的整洁和依赖的隔离，我们强烈建议在 Python 项目中使用虚拟环境。虽然这不是强制的，但这是一个非常好的习惯。

1.2 编写 Flask 代码

在 INLINECODE4724afcf 文件夹中，创建一个名为 INLINECODEb87e27c7 的文件。我们将在这里编写我们的 API 逻辑。

在这个示例中，我们创建一个 /data 端点。当 React 访问这个端点时，Flask 将返回一个包含模拟数据的 JSON 对象。我们将展示包含姓名、年龄、日期和编程语言的数据结构。

#### 后端代码示例 (server.py)

# Filename - server.py

# 从 flask 模块导入 Flask 类和 request 对象
from flask import Flask, jsonify
import datetime

# 初始化 Flask 应用
# __name__ 帮助 Flask 确定根路径
app = Flask(__name__)

# 定义一个路由，当访问 /data 路径时触发
def get_data():
    # 获取当前时间
    current_time = datetime.datetime.now()
    
    # 模拟从数据库获取的数据
    # 实际项目中，这里可能是 SQLAlchemy 查询或外部 API 调用
    response_data = {
        ‘Name‘: ‘geek‘,
        ‘Age‘: ‘22‘,
        ‘Date‘: current_time.strftime(‘%Y-%m-%d %H:%M:%S‘),
        ‘programming‘: ‘python‘
    }
    
    # 使用 jsonify 确保响应头正确设置为 application/json
    # 这比直接返回字典更符合 API 规范
    return jsonify(response_data)

# 主程序入口
if __name__ == ‘__main__‘:
    # debug=True 允许代码修改后自动重载，并提供详细的错误信息
    # 生产环境中请务必将其设置为 False
    app.run(debug=True, port=5000)

代码解析：

@app.route: 这是一个装饰器，告诉 Flask 什么样的 URL 可以触发我们的函数。这里我们只允许 GET 请求（默认）。
JSON 格式: 现代 API 通信的标准是 JSON。Flask 非常智能，可以直接返回 Python 字典，但显式使用 INLINECODE49fe2961 是更好的做法，因为它确保了 HTTP 响应头的 INLINECODEb7b6234c 正确无误，这对于 React 解析响应至关重要。

1.3 运行与测试后端

在终端中运行以下命令启动服务器：

python server.py

如果一切顺利，你将看到服务器正在运行在 http://127.0.0.1:5000/ 的提示。

步骤 2：搭建 React 前端应用

现在后端已经准备就绪，让我们转到前端。我们将使用 React 来请求并展示这些数据。

2.1 创建 React 项目

回到项目根目录，使用 React 的官方脚手架工具创建前端项目。你可以选择使用 INLINECODEc49d16c5 或 INLINECODEf7095dcf：

# 使用 npm

# 或者使用 yarn
yarn create react-app frontend

2.2 配置代理

这是连接前后端最关键的一步，也是初学者最容易遇到坑的地方。

创建完项目后，进入 INLINECODEf0a85786 文件夹并打开 INLINECODE7af0c77a 文件。你需要在 JSON 对象中添加一个 proxy 字段。

{ …其他配置…, "proxy": "http://localhost:5000",}


**为什么我们需要代理？**

在开发环境中，React 通常运行在 `localhost:3000`，而 Flask 运行在 `localhost:5000`。如果没有代理，当 React 请求 `/data` 时，浏览器会尝试在 `http://localhost:3000/data` 寻找资源，结果是 404 错误。

通过设置 `proxy`，React 开发服务器（webpack dev server）会充当中介。当它收到一个它不认识的请求（不是静态资源）时，它会将这个请求转发（代理）到我们配置的 Flask 服务器地址（`http://localhost:5000`）。这样，我们在 React 代码中就可以直接写 `fetch(‘/data‘)`，而不需要写完整的 URL `fetch(‘http://localhost:5000/data‘)`。

## 步骤 3：实现数据获取

有了 React 的骨架，现在我们需要编写逻辑来获取数据。我们将使用 React Hooks（`useState` 和 `useEffect`）来管理状态和生命周期。

### 3.1 使用 Fetch API (原生方案)

我们将修改 `src/App.js` 文件。我们将定义一个状态对象来存储从 API 获取的数据，并在组件加载时立即发起请求。

#### 前端代码示例 (`src/App.js`)

javascript

// Filename – src/App.js

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

import "./App.css";

function App() {

// 1. 使用 useState 初始化状态

// 我们预设了空值，防止数据返回前组件渲染崩溃

const [data, setData] = useState({

name: "加载中…",

age: "–",

date: "",

programming: ""

});

const [isError, setIsError] = useState(false); // 错误处理状态

// 2. 使用 useEffect 在组件挂载后执行副作用（API 请求）

useEffect(() => {

// 定义一个异步函数来获取数据

const fetchData = async () => {

try {

// 注意：这里的 /data 会被代理转发到 localhost:5000/data

const response = await fetch("/data");

// 检查响应状态，如果是 404 或 500 我们抛出错误

if (!response.ok) {

throw new Error(‘网络响应不正常‘);

}

const result = await response.json();

// 更新状态

setData({

name: result.Name,

age: result.Age,

date: result.Date,

programming: result.programming

});

} catch (error) {

console.error("获取数据出错:", error);

setIsError(true);

}

};

// 调用函数

fetchData();

}, []); // 空数组表示这个 effect 只在挂载时运行一次

return (

React 连接 Flask API 示例

{isError ? (

无法连接到后端服务器，请确保 Flask 正在运行。

) : (

姓名: {data.name}

年龄: {data.age}

日期: {data.date}

技能: {data.programming}

)}

);

}

export default App;


**代码解析：**

1.  **`useState`**: 这是 React 的“记忆”。我们用它来存储 API 返回的数据。一旦 `setData` 被调用，React 就会重新渲染页面，显示最新数据。
2.  **`useEffect`**: 被称为副作用 Hook。它告诉 React 在组件渲染到屏幕之后执行某些操作。传入空数组 `[]` 作为第二个参数是至关重要的，它确保了我们的 API 请求只在组件第一次加载时发生一次，而不会陷入无限循环。
3.  **`fetch`**: 原生浏览器 API。我们使用 `async/await` 语法使异步代码看起来像同步代码，更易于阅读和维护。

## 步骤 4：进阶方案 —— 使用 Axios

虽然 `fetch` 很强大，但在处理复杂的请求配置、超时、拦截器以及自动 JSON 转换时，`axios` 库往往能提供更好的开发体验和浏览器兼容性。

### 4.1 安装 Axios

在前端目录下运行：

bash

npm install axios


### 4.2 使用 Axios 重写获取逻辑

我们可以将上面的 `fetch` 逻辑替换为 `axios`。你会发现代码更加简洁。


useEffect(() => {
    const fetchData = async () => {
        try {
            // Axios 自动将响应转换为 JSON 对象，不需要再调用 .json()
            // 而且它比起 fetch，更容易处理错误状态
            const response = await axios.get(‘/data‘);
            
            // Axios 的数据在 response.data 中
            setData({
                name: response.data.Name,
                age: response.data.Age,
                date: response.data.Date,
                programming: response.data.programming
            });
        } catch (error) {
            console.error("Axios 错误:", error);
            setIsError(true);
        }
    };

    fetchData();
}, []);

4.3 Axios 的优势

自动 JSON 转换: 你不需要像 INLINECODEe7dc86bb 那样显式调用 INLINECODEd7647664。
更好的错误处理: INLINECODE713abeb5 只有在网络错误时才会 reject Promise，对于 404 或 500 状态码，它会视作成功响应。而 INLINECODEeccac8b2 在 4xx 或 5xx 范围内的状态码都会被视为错误，直接进入 catch 块，这在开发中更加符合直觉。
请求拦截和响应拦截: 在实际的大型项目中，我们可以很容易地为所有请求添加认证 Token，这在使用 fetch 时需要手动编写大量包装代码。

深入探讨：跨域资源共享 (CORS)

虽然我们在开发环境中使用了 INLINECODE3f6184cb 来绕过浏览器的同源策略，但在生产环境中，前端和后端通常部署在不同的域名或端口上（例如 INLINECODE7477826b 和 www.example.com）。这时，浏览器会默认阻止这种跨域请求，除非服务器明确允许。

如果你没有配置 CORS，你会在浏览器控制台看到类似这样的错误：

Access to XMLHttpRequest at ‘http://localhost:5000/data‘ from origin ‘http://localhost:3000‘ 
has been blocked by CORS policy...

解决方案：Flask-CORS

为了在生产环境或没有代理的情况下让 React 能够访问 Flask，我们需要在 Flask 服务器上安装并配置 flask-cors 扩展。

安装:

    pip install flask-cors

代码配置:

在 server.py 中，我们可以这样修改：

    from flask import Flask
    from flask_cors import CORS # 导入 CORS
    
    app = Flask(__name__)
    
    # 允许所有域名访问 (生产环境应限制具体域名)
    # origins="*" 允许所有源，这在开发时很方便
    CORS(app, resources={r"/*": {"origins": "*"}})
    
    # ... 剩余代码 ...

常见问题与最佳实践

在连接 React 和 Flask 的过程中，我们总结了一些实用建议，帮助你避开常见的坑。

端口冲突: 确保 Flask 和 React 运行在不同的端口上。Flask 默认是 5000，Create React App 默认是 3000。如果 5000 被其他应用占用，你需要修改 Flask 的启动参数，例如 app.run(port=5001)。

生产环境代理: 记住，INLINECODE7aac4039 中的 INLINECODE56a37690 设置仅在开发环境有效。当你构建 React 应用于生产 (npm run build) 时，你会得到静态文件。你需要配置像 Nginx 这样的 Web 服务器，将特定路径的请求反向代理到 Flask 上，或者在后端配置好 CORS。

数据序列化: Flask 的 jsonify 处理 Python 字典很好，但在处理日期时间对象时，最好在后端将其序列化为字符串（ISO 8601 格式），以避免前端解析时出现时区问题。

安全性: 在这个示例中，我们只是读取数据。在未来的开发中，如果你需要通过 POST 请求发送敏感数据（如密码），请务必使用 HTTPS，并在 Flask 后端实现严格的输入验证和清理，防止 SQL 注入等安全风险。

总结

通过以上步骤，我们成功构建了一个完整的全栈数据流：从 Flask 后端提供 JSON 数据，到 React 前端通过 Hooks 管理状态并展示数据。我们掌握了从零开始的配置，学会了如何使用原生 INLINECODEc74869b6 以及更强大的 INLINECODE52cb5b62 库，并深入理解了开发环境中的代理配置以及生产环境中的 CORS 机制。

这只是全栈开发的起点。现在你已经建立了稳固的连接，你可以尝试扩展后端以连接真实的数据库，或者在前端添加 POST 表单，实现向 Flask 发送数据的功能。祝你编码愉快！

投稿给我们	如何建站？
vps是什么？	如何安装宝塔？
如何通过博客赚钱？	便宜wordpress托管方案
免费wordpress主题	这些都是免费方案

豆丁博客