模块 5.5 · 后端第五课

前后端联调与 CORS

学会 CORSMiddleware 和前端配置文件

这一节要做的事

让前端页面，真的去调后端接口

前端 · :3000

后端 · :8000

主页

GET

GET/api/profile

文字实验室

POST

POST/api/analyze

前端直接替换 · 不逐行敲

从 GitHub 拉下改好的代码，覆盖同名文件

# ① 克隆课程的 demo 仓库

$git clone https://github.com/joylibo/zero-to-tech-demos.git

# ② 进入 5.5 这一份

$cd zero-to-tech-demos/zero-to-tech-5-5

# ③ 覆盖到你自己项目里的同名文件

$cp components/*.jsx ~/zero-to-tech/components/

$cp css/lab.css ~/zero-to-tech/css/

覆盖的就是这 5 个文件：HomeView · TextLabView · InputCard · ResultCard · lab.css。

第一次撞墙 · 顺着线索排查

浏览器一次请求会留下三处线索

①

浏览器 Network

请求发出去了吗？

②

后端终端

后端收到了吗？怎么处理的？

③

浏览器 Console

为什么不把响应交给我们？

先找线索，别急着改代码。

123

CORS · 跨源资源共享

「源」：协议 + 域名 + 端口

CORS 全称 Cross-Origin Resource Sharing（跨源资源共享）
浏览器不允许网页的 JavaScript 脚本去读取没有得到授权的跨源响应

协议

域名

端口

🌐 前端http://localhost:3000

http

localhost

3000

🗄️ 后端http://localhost:8000

http

localhost

8000

✓ 相同

✗ 不同

端口不同 → 跨源（cross-origin），浏览器这才要做 CORS 检查。

12

CORS

🌐浏览器 :3000

网页 JS

:3000

✗ 拿不到响应

🚦

CORS 检查

Origin: http://localhost:3000

无 Access-Control-Allow-Origin ↓ 不交给网页 JS

① 请求发出

▶

② 响应 200 带着数据

◀

🗄️

后端

:8000

123

给 FastAPI 加 CORS · 用中间件

🌐浏览器 :3000

网页 JS

:3000

✓ 拿到数据

🚦

CORS 检查

有 Access-Control-Allow-Origin ↓ 交给网页 JS

① 请求发出

▶

② 响应带着许可回来

◀

⚙️FastAPI 应用 :8000

🛡️

CORSMiddleware

响应出去时盖章＋ Access-Control-Allow-Origin

路由

@app.get
@app.post

123

CORS 预检 preflight

🌐浏览器 :3000

网页 JS

POST · JSON

✓ 拿到数据

🚦

CORS 检查

预检：这个 POST 准发吗？

✓ 后端允许 ↓ 浏览器发真正的 POST

① OPTIONS 预检

③ 真正的 POST

▶

② 预检响应 · 允许

◀

⚙️FastAPI 应用 :8000

🛡️

CORSMiddleware

预检回答 Access-Control-Allow-Methods: POST

路由

@app.get
@app.post

123

最后一步 · 地址属于配置

地址会随环境而变，应该放入配置文件

写死 · 散落

HomeView.jsx http://localhost:8000

InputCard.jsx http://localhost:8000

换端口、换机器、上线 → 满项目搜索替换，漏一处就是难找的 bug

收进 .env.local · 一个源头

NEXT_PUBLIC_API_BASE_URL=http://localhost:8000

HomeView.jsx ${API}

InputCard.jsx ${API}

换环境只改这一处；改完记得重启前端

见证 · 完整链路

🌐浏览器 :3000

网页 JS

输入文字

✓ 界面刷新

🚦

CORS 检查

有 Access-Control-Allow-Origin ↓ 交给网页 JS

① 发出请求

▶

② 带结果返回

◀

⚙️FastAPI 应用 :8000

🛡️

CORSMiddleware

响应盖章＋ Access-Control-Allow-Origin

路由 @app.post

Python 处理请求

→ 算出 JSON

1234

模块 5 · 收官回顾

从「什么是 API」到前后端真正握手

5.1

亲手调真实 API，理解调用方 · 被调用方 · 约定

5.2

装 Python、建 venv，用 pip / requirements 管依赖

5.3

零依赖手搓 API，看清 HTTP 的请求与响应

5.4

用 FastAPI 重写，体验路由、校验、自动文档

5.5

前后端联调 · 排查 · CORS 与预检 · 配置管理

下一模块

让文字实验室，
真的会分析

下个模块去领 Python 生态的红利：用第三方库把分析变成真的，再把结果保存下来。