当前位置：首页 > React

flask如何运行react

2026-03-30 23:03:02React

运行 React 与 Flask 的集成方法

将 React 与 Flask 结合通常有两种主要方式：一种是通过 Flask 提供 API 后端，React 作为独立前端；另一种是将 React 构建后的静态文件嵌入 Flask。以下是具体实现方法：

方法一：前后端分离（推荐）

Flask 作为 API 后端，React 独立运行

创建 Flask API 后端 安装 Flask 并创建一个简单的 API：

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/data')
def get_data():
    return jsonify({"message": "Hello from Flask!"})

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

创建 React 前端 使用 create-react-app 初始化项目，并通过 fetch 或 axios 调用 Flask API：

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

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('http://localhost:5000/api/data')
      .then(res => res.json())
      .then(data => setData(data.message));
  }, []);

  return <div>{data || "Loading..."}</div>;
}

export default App;

解决跨域问题 在 Flask 中启用 CORS：
```
from flask_cors import CORS
CORS(app)
```

方法二：React 构建文件嵌入 Flask

将 React 构建后的静态文件托管在 Flask 中

构建 React 项目 在 React 项目目录中运行：
```
npm run build
```
生成 build 文件夹。

配置 Flask 托管静态文件 将 build 文件夹内容复制到 Flask 的 static 目录，并通过 Flask 路由返回 index.html：

from flask import send_from_directory

@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def serve(path):
    if path != "" and os.path.exists(os.path.join('static', path)):
        return send_from_directory('static', path)
    else:
        return send_from_directory('static', 'index.html')

修改 React 路由兼容性 如果使用 React Router，确保在 package.json 中添加：
```
"homepage": ".",
```

注意事项

开发模式代理：在 React 的 package.json 中添加代理以避免跨域：
```
"proxy": "http://localhost:5000"
```
生产部署：对于生产环境，建议使用 Nginx 或类似工具反向代理 Flask 和 React。
静态文件路径：确保 Flask 的 static_folder 参数正确指向 React 的构建输出目录。