php前后端分离需改掉三个默认习惯:不渲染html、不依赖session传状态、不混放前端文件;关键要显式设置json响应头、正确处理跨域、避免session在跨域下失效。

php 做前后端分离,不是“学个新东西”,而是**改掉三个默认习惯**:不渲染 HTML、不依赖 Session 传状态、不把前端文件塞进 public/ 目录里混着跑。只要绕开这三点,用 Laravel、ThinkPHP 或原生 php 都能快速跑通。
为什么直接返回 JSON 却总被浏览器下载或报错?
常见现象:访问 /api/users,浏览器弹出“下载文件”对话框,或者显示乱码、空白页;Chrome 控制台提示 MIME type text/html is not executable。
根本原因:PHP 脚本没声明响应类型,服务器默认返回 text/html,而前端(如 Axios)期望的是 application/json。
- 所有 API 接口入口必须显式设置 header:
header('Content-Type: application/json; charset=utf-8'); - Laravel 中用
response()->json(),ThinkPHP 6+ 用json()或配置'default_return_type' => 'json',别依赖echo json_encode(...)后不设 header - 确保没有意外输出:开头无空格、BOM、
var_dump、print_r残留,否则 JSON 会因前置内容而解析失败
跨域请求被拦住,OPTIONS 返回 405 或 500 怎么办?
开发时 Vue 在 http://localhost:5173,PHP 后端在 http://localhost:8000,一发请求就卡在预检(OPTIONS),控制台报 Response to preflight request doesn't pass access control check。
手动加 header('Access-Control-Allow-Origin: *') 是最常踩的坑——它只解决一半问题,漏掉 OPTIONS 处理、凭据支持、方法白名单,上线必崩。
- ThinkPHP 推荐装官方扩展:
composer require topthink/think-cors,配config/cors.php,生产环境禁用*,写死前端域名 - Laravel 用
fruitcake/laravel-cors,别自己写中间件拼 header - 如果后端完全无状态(如用 JWT),前端 Axios 请求可去掉
withCredentials: true,省去 Cookie / Session 跨域纠缠
登录后拿不到用户信息,$_SESSION 总是空?
前端调 /login 成功,但后续请求 /user/profile 返回 401,var_dump($_SESSION) 是空数组。这不是 PHP 配置问题,而是跨域下 Session ID 根本没传过来。
浏览器对跨域请求默认不携带 Cookie,而 PHP 的 Session 依赖 PHPSESSID Cookie 维持上下文。
- 方案一(推荐):放弃 Session,改用 JWT。登录成功后返回 token,前端存在 localStorage,后续请求带
Authorization: Bearer xxx - 方案二(若必须用 Session):Axios 设置
withCredentials: true,后端 CORS 配置中allow_credentials设为true,且origin不能为*—— 二者缺一不可 - 验证码、短信登录等场景,绝对不要把校验码存 Session,改用 Redis + 随机
captcha_id透传,否则跨域下 100% 失效
php免费学习视频:立即使用
踏上前端学习之旅,开启通往精通之路!从前端基础到项目实战,循序渐进,一步一个脚印,迈向巅峰!











