本文讲解如何在 FastAPI 中安全、可靠地将用户通过表单输入的数据（如搜索关键词）经 POST 提交后，再跳转至 GET 页面（如 /books）并展示结果，避免直接调用未传参的异步函数导致的 AttributeError。
本文讲解如何在 fastapi 中安全、可靠地将用户通过表单输入的数据（如搜索关键词）经 post 提交后，再跳转至 get 页面（如 `/books`）并展示结果，避免直接调用未传参的异步函数导致的 `attributeerror`。
在 FastAPI 中，@app.post 和 @app.get 是两个独立的请求生命周期——POST 请求负责接收并处理数据，GET 请求则用于渲染页面或返回资源。你当前代码中在 /books 的 GET 路由里直接调用 await get_books()，但该函数定义为接收 prompt = Body() 参数，而 GET 请求没有请求体（Body），因此 FastAPI 尝试解析空 Body 时抛出 AttributeError: 'Body' object has no attribute 'casefold'（本质是 prompt 为 None 或无效对象，却调用了 .casefold()）。
✅ 正确思路不是“让 GET 调用 POST 函数”，而是分离职责：
- POST 接口（/get_books）专注校验、查询、返回 JSON 结果；
- 前端在成功获取结果后，将数据暂存至浏览器内存，再跳转；
- GET 页面（/books）从内存读取并渲染（或结合查询参数重查）。
✅ 推荐方案：使用 sessionStorage 暂存 + 前端跳转
sessionStorage 生命周期与当前标签页绑定，安全、轻量、无需服务端状态管理，完美匹配单次搜索跳转场景。
1. 修正前端逻辑（关键修改）
<!-- 移除 href 默认跳转，改用 JavaScript 控制 --> <a id="btn" role="button" class="main__arrow" href="javascript:void(0)"> <i class="fa-solid fa-arrow-right"></i> </a>
const el = document.getElementById('btn');
el.addEventListener('click', async function () {
const promptValue = document.getElementById("prompt").value.trim();
if (!promptValue) return;
try {
const response = await fetch("/get_books", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ prompt: promptValue }) // 注意键名需与后端参数一致
});
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const bookList = await response.json();
// ✅ 存入 sessionStorage（字符串化）
sessionStorage.setItem('searchResult', JSON.stringify(bookList));
sessionStorage.setItem('searchPrompt', promptValue);
// ✅ 立即跳转（不带参数，干净 URL）
window.location.href = '/books';
} catch (err) {
console.error("搜索失败:", err);
}
});2. 优化 FastAPI 后端接口
from fastapi import APIRouter, Body, Request
from fastapi.responses import HTMLResponse
@app.post('/get_books')
async def get_books(prompt: str = Body(..., embed=True)): # ✅ 显式声明 prompt 为必需字符串
print(f"Received prompt: '{prompt}'")
book_list = []
for book in BOOKS:
title = book.get('title', '').casefold()
author = book.get('author', '').casefold()
category = book.get('category', '').casefold()
if prompt.casefold() in (title, author, category):
book_list.append(book)
return book_list # ✅ 直接返回列表，FastAPI 自动序列化为 JSON⚠️ 注意：Body(..., embed=True) 表示期望 JSON 形如 {"prompt": "xxx"}；若前端发送 {info: "xxx"}，则需改为 info: str = Body(..., alias="info")。
3. 更新 /books GET 路由：读取 sessionStorage 并渲染
由于 sessionStorage 仅存在于浏览器端，服务端无法直接访问。因此 /books 页面应由前端自主渲染结果，而非依赖后端传入数据：
@app.get('/books', response_class=HTMLResponse)
async def books(request: Request):
# ✅ 不再调用 get_books()！仅返回空白模板
return templates.TemplateResponse("books.html", {"request": request})并在 books.html 中添加初始化脚本：
<!-- books.html -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const resultStr = sessionStorage.getItem('searchResult');
const prompt = sessionStorage.getItem('searchPrompt');
if (resultStr) {
const bookList = JSON.parse(resultStr);
const container = document.getElementById('book-list');
container.innerHTML = bookList.map(book => `
<div class="book">
<h3>${escapeHtml(book.title)}</h3>
<p>作者: ${escapeHtml(book.author)} | 分类: ${escapeHtml(book.category)}</p>
</div>
`).join('');
// ✅ 可选：清空 sessionStorage 避免重复使用
sessionStorage.removeItem('searchResult');
sessionStorage.removeItem('searchPrompt');
} else {
document.getElementById('book-list').innerHTML = '<p>未找到搜索结果，请返回重试。</p>';
}
});
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
</script>
<div id="book-list"></div>? 替代方案对比（供进阶参考）
| 方案 | 是否推荐 | 说明 |
|---|---|---|
| ✅ sessionStorage（本文方案） | ★★★★★ | 无服务端状态、低耦合、适合单页跳转场景 |
| 查询参数（/books?prompt=xxx） | ★★★☆☆ | 简单但暴露敏感信息、URL 过长、需后端重查（非缓存结果） |
| Cookie（带签名） | ★★☆☆☆ | 需服务端签名验证，增加复杂度，不适用于临时数据 |
| 后端 Session（如 fastapi-session） | ★★☆☆☆ | 过重，违背无状态 REST 原则，增加部署负担 |
✅ 总结
- 永远不要在 GET 路由中直接调用依赖 Body 的 POST 函数——它们语义与协议完全不同；
- 使用 sessionStorage 是前端驱动型跳转中最简洁、安全的跨请求数据传递方式；
- 后端应保持职责单一：POST 处理提交，GET 渲染视图；
- 前端需做好错误处理、输入校验和 XSS 防护（如 escapeHtml）。
遵循以上模式，即可优雅解决“输入→提交→跳转→展示”的完整用户流程。
