新手用ThinkPHP做前后端分离应先理清边界：后端只管API，前端独立运行HTML/JS/CSS；核心三步是环境搭稳、路由分清、通信通顺，按此顺序操作即可正确起步。
新手用 ThinkPHP 做前后端分离，别一上来就改配置或写接口，先理清边界：后端只管 API，前端自己跑 HTML/JS/CSS。核心动作就三步——环境搭稳、路由分清、通信通顺。下面按实际开发顺序说清楚。
装好基础环境，确认 PHP 和 Composer 可用
ThinkPHP 6/8 要求 PHP ≥ 8.0（TP8 强制），先在命令行运行 php -v 和 composer -V 确认版本。没问题再创建项目：
-
composer create-project topthink/think myapi（推荐 TP8） - 进项目目录，运行
php think run，访问http://127.0.0.1:8000看是否显示 ThinkPHP 欢迎页 - 前端另起一个目录，用 Vue CLI 或 Vite 创建项目（比如
npm create vue@latest），不放 PHP 项目里
配好路由，让前端页面和 API 各走各的路
关键不是“怎么写 API”，而是“怎么不让前端请求误进后端控制器”。打开 config/route.php，做三件事：
- 关掉强制路由：
'url_route_must' => false（否则非定义路径直接 404） - 把所有非 API 请求兜底到前端入口：
Route::rule('[:path]', 'index/index')->ext('html');（加->ext('html')防止匹配到.json接口） - 显式声明 API 域名或前缀，比如用子域名：
Route::domain('api', function () { Route::group('v1', [...]); });，这样https://api.your.com/v1/user就不会被前端路由吞掉
处理跨域，别手动 header，用 think-cors 扩展
浏览器发请求前会先发 OPTIONS 预检，手动写 header() 很容易漏掉它或 credentials 兼容问题。正确做法：
立即学习“PHP免费学习笔记（深入）”；
- 执行
composer require topthink/think-cors - 在
app/middleware.php中注册：[\think\middleware\Cors::class] - 新建
config/cors.php，填具体前端地址（开发可写['http://localhost:5173']，生产必须写死域名）：'allow_credentials' => true（如果前端 Axios 开了withCredentials: true）'allow_origin' => ['http://localhost:5173']（不能和allow_credentials同时为*）
写第一个接口，返回干净 JSON，不带 HTML 干扰
别用 return $this->fetch()，也别依赖 Session 渲染模板。控制器里统一用 return json([...])：
- 新建
app/controller/api/v1/User.php，方法里直接return json(['code' => 0, 'data' => ['id' => 1, 'name' => '张三']]); - 确保没其他输出：检查有没有
echo、var_dump、多余空格或 BOM 字符 - 前端用浏览器直接访问
http://api.your.com/v1/user（或代理后地址），看响应头是Content-Type: application/json，内容是纯 JSON 就对了
不复杂但容易忽略：前后端分离不是换套写法，而是换一套协作逻辑。前端静态资源交给 Nginx/Apache 直接托管，后端只暴露 /api/ 开头的 JSON 接口，两者域名或端口可以完全独立。稳住这个前提，后面加 JWT、Redis 验证码、统一响应格式都顺了。
