ThinkPHP 8.0需后端路由级配置->allowCrossDomain()（带域名白名单+true启用凭证），前端用AbortController防抖中止旧请求，并确保返回纯JSON无HTML残留。
前端首页调用搜索建议接口，关键不是“能不能调”，而是「请求发得对不对」「后端返回得干不干净」「防抖和 abort 控制有没有漏」。只要这三点踩准，fetch 一行就能跑通。
怎么写 fetch 请求才不会被跨域拦住
ThinkPHP8 默认不自动加 CORS 头，直接 fetch('/api/suggest?q=php') 很可能卡在 OPTIONS 阶段，控制台报 “No 'Access-Control-Allow-Origin' header”。必须确认后端已按路由级开启跨域：
- 在
route/app.php中，确保搜索接口路由末尾带->allowCrossDomain()：Route::get('api/suggest', 'Api\Suggest@search')->allowCrossDomain(); - 如果前端要带 Cookie（比如登录态校验），不能只写
->allowCrossDomain()，必须显式传域名数组和true：->allowCrossDomain(['https://your-frontend.com'], true) - 别在中间件里配 CORS 后又忘了拦截
OPTIONS—— 路由级最稳，也最不容易漏掉Access-Control-Allow-Headers
前端怎么防用户狂敲键盘导致请求堆积
输入框每打一个字就发一次请求，用户连输“phpstorm”，可能触发 8 次 fetch，但只有最后一次响应有意义。不处理就会出现“先返回的 suggestion 反而覆盖后返回的”这种错乱。
- 必须用
AbortController主动中止前序请求：const controller = new AbortController();fetch('/api/suggest?q=' + q, { signal: controller.signal }) - 每次新输入前，先调
controller.abort()（注意捕获AbortError） - 配合防抖：延迟 300ms 再发请求，但不是用
setTimeout简单包一层，而是每次输入都重置 timer ID，保证只执行最后一次
后端 /api/suggest 返回的数据格式必须严格达标
前端 fetch().then(r => r.json()) 报错“Unexpected token
立即学习“PHP免费学习笔记（深入）”；
- 开头加
header('Content-Type: application/json; charset=utf-8');—— 不要依赖框架自动设，自己写死 - 只输出
json_encode($data, JSON_UNESCAPED_UNICODE)，前后不能有任何echo、var_dump、print_r或换行符 -
$q = trim(input('get.q', ''))后立刻判断长度，超 50 字就return json([])，避免慢查询拖垮接口 - 数据库查完用
limit(10)，别依赖前端 JS 截断 —— 后端才是数据出口的守门人
最容易被忽略的是：ThinkPHP8 默认开启 debug 模式时，即使你没 echo，框架也可能在响应末尾注入调试脚本。上线前一定确认 APP_DEBUG = false，且 config/app.php 中 'show_error_msg' => false 已关闭。否则 JSON 体后面多出一串 HTML，前端解析必挂。
