FastAPI与Flask后端对接React/Vue全栈集成实践：API设计、CORS与JWT认证

脚本专家

全栈开发中，Python作为后端语言与前端框架的集成是常见需求。本文结合FastAPI与Flask两种框架，展示如何构建RESTful API并与React、Vue前端进行数据交互，同时解决CORS、JWT认证及部署等关键问题。

一、后端API设计：FastAPI与Flask实现CRUD

1.1 FastAPI版本
FastAPI基于Pydantic模型自动生成文档，适合构建高性能API。以下代码演示了商品的增删改查操作：

2. from fastapi import FastAPI
3. from pydantic import BaseModel
4. from typing import List
6. app = FastAPI()
8. class Item(BaseModel):
9.     id: int
10.     name: str
11.     price: float
12.     is_offer: bool = None
14. items = []
16. @app.get("/")
17. def read_root():
18.     return {"message": "Hello, World!"}
20. @app.get("/items/{item_id}")
21. def read_item(item_id: int):
22.     for item in items:
23.         if item.id == item_id:
24.             return item
25.     return {"error": "Item not found"}
27. @app.post("/items/")
28. def create_item(item: Item):
29.     items.append(item)
30.     return item
32. @app.put("/items/{item_id}")
33. def update_item(item_id: int, item: Item):
34.     for i, existing_item in enumerate(items):
35.         if existing_item.id == item_id:
36.             items[i] = item
37.             return item
38.     return {"error": "Item not found"}
40. @app.delete("/items/{item_id}")
41. def delete_item(item_id: int):
42.     for i, item in enumerate(items):
43.         if item.id == item_id:
44.             items.pop(i)
45.             return {"message": "Item deleted"}
46.     return {"error": "Item not found"}

复制代码

1.2 Flask版本
Flask轻量灵活，使用request和jsonify处理JSON请求与响应：

2. from flask import Flask, request, jsonify
4. app = Flask(__name__)
5. items = []
7. @app.route('/', methods=['GET'])
8. def read_root():
9.     return jsonify({"message": "Hello, World!"})
11. @app.route('/items/<int:item_id>', methods=['GET'])
12. def read_item(item_id):
13.     for item in items:
14.         if item['id'] == item_id:
15.             return jsonify(item)
16.     return jsonify({"error": "Item not found"})
18. @app.route('/items/', methods=['POST'])
19. def create_item():
20.     item = request.get_json()
21.     items.append(item)
22.     return jsonify(item)
24. @app.route('/items/<int:item_id>', methods=['PUT'])
25. def update_item(item_id):
26.     item = request.get_json()
27.     for i, existing_item in enumerate(items):
28.         if existing_item['id'] == item_id:
29.             items[i] = item
30.             return jsonify(item)
31.     return jsonify({"error": "Item not found"})
33. @app.route('/items/<int:item_id>', methods=['DELETE'])
34. def delete_item(item_id):
35.     for i, item in enumerate(items):
36.         if item['id'] == item_id:
37.             items.pop(i)
38.             return jsonify({"message": "Item deleted"})
39.     return jsonify({"error": "Item not found"})
41. if __name__ == '__main__':
42.     app.run(debug=True)

复制代码

二、前端集成：React与Vue调用API

2.1 React集成
使用useState和useEffect实现数据获取与提交：

2. import React, { useState, useEffect } from 'react';
4. function App() {
5.   const [items, setItems] = useState([]);
6.   const [newItem, setNewItem] = useState({ id: '', name: '', price: '', is_offer: false });
8.   useEffect(() => {
9.     fetch('http://localhost:8000/items/')
10.       .then(response => response.json())
11.       .then(data => setItems(data));
12.   }, []);
14.   const handleSubmit = (e) => {
15.     e.preventDefault();
16.     fetch('http://localhost:8000/items/', {
17.       method: 'POST',
18.       headers: { 'Content-Type': 'application/json' },
19.       body: JSON.stringify(newItem),
20.     })
21.       .then(response => response.json())
22.       .then(data => {
23.         setItems([...items, data]);
24.         setNewItem({ id: '', name: '', price: '', is_offer: false });
25.       });
26.   };
28.   return (
29.     <div>
30.       <h1>Items</h1>
31.       <ul>
32.         {items.map(item => (
33.           <li key={item.id}>{item.name} - ${item.price}</li>
34.         ))}
35.       </ul>
36.       <form onSubmit={handleSubmit}>
37.         <input type="text" placeholder="ID" value={newItem.id} onChange={(e) => setNewItem({...newItem, id: parseInt(e.target.value)})} />
38.         <input type="text" placeholder="Name" value={newItem.name} onChange={(e) => setNewItem({...newItem, name: e.target.value})} />
39.         <input type="number" placeholder="Price" value={newItem.price} onChange={(e) => setNewItem({...newItem, price: parseFloat(e.target.value)})} />
40.         <button type="submit">Add Item</button>
41.       </form>
42.     </div>
43.   );
44. }
45. export default App;

复制代码

2.2 Vue集成
使用Vue的data、mounted和methods实现同样功能：

2. <template>
3.   <div>
4.     <h1>Items</h1>
5.     <ul>
6.       <li v-for="item in items" :key="item.id">{{ item.name }} - ${{ item.price }}</li>
7.     </ul>
8.     <form @submit.prevent="handleSubmit">
9.       <input type="text" placeholder="ID" v-model.number="newItem.id" />
10.       <input type="text" placeholder="Name" v-model="newItem.name" />
11.       <input type="number" placeholder="Price" v-model.number="newItem.price" />
12.       <button type="submit">Add Item</button>
13.     </form>
14.   </div>
15. </template>
17. <script>
18. export default {
19.   data() {
20.     return {
21.       items: [],
22.       newItem: { id: '', name: '', price: '', is_offer: false }
23.     };
24.   },
25.   mounted() {
26.     this.fetchItems();
27.   },
28.   methods: {
29.     fetchItems() {
30.       fetch('http://localhost:8000/items/')
31.         .then(response => response.json())
32.         .then(data => { this.items = data; });
33.     },
34.     handleSubmit() {
35.       fetch('http://localhost:8000/items/', {
36.         method: 'POST',
37.         headers: { 'Content-Type': 'application/json' },
38.         body: JSON.stringify(this.newItem),
39.       })
40.         .then(response => response.json())
41.         .then(data => {
42.           this.items.push(data);
43.           this.newItem = { id: '', name: '', price: '', is_offer: false };
44.         });
45.     }
46.   }
47. };

复制代码

三、数据传输与CORS处理

默认JSON格式传输，但前后端域名不同时会触发跨域错误。FastAPI和Flask均需显式配置CORS。

FastAPI中通过CORSMiddleware允许所有来源（生产环境应限定域名）：

2. from fastapi.middleware.cors import CORSMiddleware
3. app.add_middleware(
4.     CORSMiddleware,
5.     allow_origins=["*"],
6.     allow_credentials=True,
7.     allow_methods=["*"],
8.     allow_headers=["*"]
9. )

复制代码

Flask中安装flask-cors后直接初始化：

2. from flask_cors import CORS
3. app = Flask(__name__)
4. CORS(app)

复制代码

四、JWT认证实现

FastAPI结合python-jose库实现JWT生成与验证。以下模拟用户数据库进行登录与保护路由：

2. from fastapi import FastAPI, Depends, HTTPException, status
3. from fastapi.security import OAuth2PasswordBearer, OAuth2PasswordRequestForm
4. from jose import JWTError, jwt
5. from datetime import datetime, timedelta
7. SECRET_KEY = "your-secret-key"
8. ALGORITHM = "HS256"
9. ACCESS_TOKEN_EXPIRE_MINUTES = 30
11. fake_users_db = {
12.     "alice": {
13.         "username": "alice",
14.         "full_name": "Alice Smith",
15.         "email": "alice@example.com",
16.         "hashed_password": "fakehashedsecret",
17.         "disabled": False
18.     }
19. }
21. def fake_hash_password(password: str):
22.     return "fakehashed" + password
24. def verify_password(plain_password, hashed_password):
25.     return hashed_password == fake_hash_password(plain_password)
27. def get_user(db, username: str):
28.     return db.get(username)
30. def create_access_token(data: dict, expires_delta: timedelta = None):
31.     to_encode = data.copy()
32.     expire = datetime.utcnow() + (expires_delta or timedelta(minutes=15))
33.     to_encode.update({"exp": expire})
34.     return jwt.encode(to_encode, SECRET_KEY, algorithm=ALGORITHM)
36. oauth2_scheme = OAuth2PasswordBearer(tokenUrl="token")
38. async def get_current_user(token: str = Depends(oauth2_scheme)):
39.     credentials_exception = HTTPException(
40.         status_code=status.HTTP_401_UNAUTHORIZED,
41.         detail="Could not validate credentials",
42.         headers={"WWW-Authenticate": "Bearer"}
43.     )
44.     try:
45.         payload = jwt.decode(token, SECRET_KEY, algorithms=[ALGORITHM])
46.         username: str = payload.get("sub")
47.         if username is None:
48.             raise credentials_exception
49.     except JWTError:
50.         raise credentials_exception
51.     user = get_user(fake_users_db, username=username)
52.     if user is None:
53.         raise credentials_exception
54.     return user
56. @app.post("/token")
57. async def login(form_data: OAuth2PasswordRequestForm = Depends()):
58.     user = get_user(fake_users_db, form_data.username)
59.     if not user or not verify_password(form_data.password, user["hashed_password"]):
60.         raise HTTPException(status_code=400, detail="Incorrect username or password")
61.     access_token = create_access_token(
62.         data={"sub": user["username"]},
63.         expires_delta=timedelta(minutes=ACCESS_TOKEN_EXPIRE_MINUTES)
64.     )
65.     return {"access_token": access_token, "token_type": "bearer"}
67. @app.get("/users/me")
68. async def read_users_me(current_user: dict = Depends(get_current_user)):
69.     return current_user

复制代码

五、部署方案

后端使用Docker容器化部署，Dockerfile示例如下：

2. FROM python:3.9-slim
3. WORKDIR /app
4. COPY requirements.txt .
5. RUN pip install --no-cache-dir -r requirements.txt
6. COPY . .
7. EXPOSE 8000
8. CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "8000"]

复制代码

前端可部署至Vercel（适合React/Next.js）、Netlify（Vue/React）或GitHub Pages。若需前后端联调，使用Docker Compose编排：

2. version: '3'
3. services:
4.   backend:
5.     build: ./backend
6.     ports:
7.       - "8000:8000"
8.   frontend:
9.     build: ./frontend
10.     ports:
11.       - "3000:3000"
12.     depends_on:
13.       - backend

复制代码

六、常见问题与解决方案

跨域问题通过CORS中间件解决；认证问题使用JWT标准流程；部署时利用Docker保持环境一致性。性能优化方面建议接口加入缓存层（如Redis），并合理设计数据库查询。

总结：Python（FastAPI/Flask）与前端（React/Vue）的组合能够高效构建全栈应用。掌握API设计、CORS配置、JWT认证和容器化部署是打通前后端的关键步骤。实践时可从简单的CRUD项目入手，逐步集成认证与部署，通过项目驱动巩固知识。

热心网友1

感谢分享这么详细的实践内容！FastAPI 和 Flask 的 CRUD 代码对比很清晰，对刚接触前后端集成的开发者来说非常友好。特别是同时展示了两种框架的处理方式，能帮助大家根据项目需求灵活选择。期待后续能补充 CORS 配置和 JWT 认证的具体实现，这部分在实际全栈项目中往往是绕不开的坑，如果能结合 React/Vue 的拦截器或 axios 的配置讲解，会让整套方案更完整。