ThinkPHP前后端分离开发教程-ThinkPHP-PHP中文网

thinkphp前后端分离的核心卡点是session跨域失效、content-type未设置、options预检被忽略；需统一配置json返回类型、启用cors扩展、改用redis存验证码、jwt替代session实现无状态认证。

thinkphp前后端分离开发教程

ThinkPHP 做前后端分离，不是换套模板或加个 Vue 就完事——核心卡点就三个：session 跨域失效、Content-Type 响应头漏设、OPTIONS 预检被忽略。绕不开这三处，接口要么 401，要么下载 JSON 文件，要么直接卡死在预检阶段。

这是最常被忽视的底层错误：PHP 脚本没声明响应类型，Web 服务器默认返回 text/html，而前端（如 Axios）收到后无法解析，只能当二进制流触发下载。

所有 API 入口必须显式设置 header('Content-Type: application/json; charset=utf-8')；ThinkPHP 6/8 推荐统一配置 'default_return_type' => 'json'，而非依赖 echo json_encode() 后手动补 header
确保控制器返回前无任何输出：开头无 BOM、无空格、无 var_dump() / print_r() 残留，否则 JSON 会因前置内容而解析失败
若用 return json([...])，确认该方法已启用（TP6 默认支持，TP5 需开启 json 输出类型）

手动写 header('Access-Control-Allow-Origin: *') 只解决一半问题。浏览器预检（OPTIONS）需要完整响应头，且 TP6 的响应对象不认裸 header() 调用——它会被后续流程覆盖。

宝塔面板 PHP 网站管理：站点创建、删除、启停、PHP 版本切换、域名管理、SSL证书管理、伪静态管理、数据库管理

下载

别自己拼中间件，直接装官方扩展：composer require topthink/think-cors
配置 config/cors.php，开发时可设 'origin' => ['http://localhost:5173']，生产环境严禁用 *
allow_credentials 设为 true 时，origin 必须是具体域名（不能是 *），否则浏览器直接拒绝
前端 Axios 请求若带 withCredentials: true，后端必须同时返回 Access-Control-Allow-Credentials: true，否则 Cookie 不会发送

这不是验证码扩展的问题，是 Session 在跨域下天然不可用：前端请求 /captcha 和提交表单是两个独立请求，浏览器不自动携带 Cookie，PHPSESSID 断了，Session 就是空的。

放弃 Session 绑定，改用 Redis 存储 + 显式传递 captcha_id
生成验证码接口返回 JSON：{ "captcha_id": "abc123", "image": "data:image/png;base64,..." }
前端把 captcha_id 存入表单 hidden 字段或请求头，校验时连同用户输入的 code 一起发给后端
后端从 Redis 读 captcha:abc123 做比对，验证通过即删键（避免重放）

本质和验证码一样：跨域请求默认不发 Cookie，Session ID 传不过来。强行配 withCredentials + Allow-Credentials 能跑通，但违背无状态 API 原则，且引入 SameSite、CSRF 等新问题。

推荐方案：改用 JWT。登录成功后返回 access_token，前端存 localStorage，后续请求带 Authorization: Bearer xxx
JWT 验证中间件里，token 解析失败就直接 return json(['code'=>401])，不走 Session 逻辑
若必须保留 Session（比如对接老系统），则前端 Axios 必须设 withCredentials: true，后端 CORS 配置中 allow_credentials 和 origin 必须严格匹配，且 PHP 的 session.cookie_samesite 需设为 Lax 或 None（后者需 Secure）