讲师中心 微信公众号
AI工具推荐 视频效率加速

PHP前端后端分离开发指南

星萱小哥_8710

星萱小哥_8710

发布时间:2026-05-15 20:50:06

|

552人浏览过

|

来源于php中文网

原创

PHP前后端分离需改三个默认行为:不渲染HTML、不依赖$_SESSION传状态、不混放前端文件;必须显式设置header('Content-Type: application/json'),正确配置CORS(含OPTIONS处理、凭据支持),验证码和登录状态改用JWT或Redis+唯一ID替代Session。

php前端后端分离开发指南

PHP 做前后端分离,不是换框架,而是改掉三个默认行为:不渲染 HTML、不靠 $_SESSION 传状态、不把前端文件塞进 public/ 目录混着跑。只要绕开这三点,Laravel、ThinkPHP 甚至原生 PHP 都能立刻跑通 API。

header('Content-Type: application/json') 必须显式写,不能省

常见现象:访问 /api/users,浏览器弹下载框,或显示乱码、空白页;Chrome 控制台报 MIME type text/html is not executable。

根本原因:PHP 脚本没声明响应类型,服务器默认返回 text/html,而 Axios、Fetch 等前端库只认 application/json。

  • Laravel 中必须用 response()->json(),别用 echo json_encode() + 手动 header —— 容易漏、容易错位
  • ThinkPHP 6+ 推荐配置 'default_return_type' => 'json',或控制器里直接调 json()
  • 原生 PHP 写法:开头第一行必须是 header('Content-Type: application/json; charset=utf-8');,且前面绝不能有任何输出(包括空格、BOM、var_dump()、print_r())
  • 一旦有前置输出,JSON 就会变成 {"error":"..."} 前面带一堆 HTML 或空白,前端解析直接失败

跨域预检(OPTIONS)失败,光加 Origin 头没用

Vue 在 http://localhost:5173,PHP 后端在 http://localhost:8000,一发 POST 请求就卡在 OPTIONS,控制台报 Response to preflight request doesn't pass access control check。

立即学习“PHP免费学习笔记(深入)”;

手动写 header('Access-Control-Allow-Origin: *') 是最典型误区——它只解决一半问题,漏掉 OPTIONS 处理、凭据支持、方法白名单,上线必崩。

btpanel phpsite 宝塔面板PHP网站
btpanel phpsite 宝塔面板PHP网站

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

下载
  • ThinkPHP 推荐装官方扩展:composer require topthink/think-cors,然后配 config/cors.php,关键项不能少:'allow_credentials' => true、'allow_methods' => ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS']、'allow_headers' => ['Content-Type', 'Authorization']
  • Laravel 用 fruitcake/laravel-cors,别自己拼中间件——它自动处理预检、缓存头、expose headers
  • 生产环境 'origin' 必须写死域名,禁用 *;allow_credentials 设为 true 时,origin 不能是 *,否则浏览器直接拒绝
  • Axios 请求若依赖 Cookie(比如还用 Session),必须加 withCredentials: true;若用 JWT,则可关掉凭据,改用 Authorization: Bearer xxx

验证码校验总失败?Session 在跨域下根本不可靠

前端请求 /captcha 拿图片,后端存到 $this->session->set('captcha.key', $hash);提交表单时带验证码文本,后端查 $this->session->get('captcha.key') —— 跨域后永远返回 null。

原因很直接:浏览器跨域默认不发 Cookie,PHPSESSID 传不过去,Session 上下文就断了。

  • 必须放弃 Session 绑定,改用可传递的唯一 ID:captcha_id
  • 生成验证码时,后端返回 JSON:{ "captcha_id": "abc123", "image": "data:image/png;base64,..." }
  • 前端把 captcha_id 存进 hidden 字段或请求头,校验接口用它查 Redis:GET captcha:abc123
  • 查完立刻 DEL captcha:abc123,防重放;别用文件或数据库存,Redis 是唯一靠谱选择

登录后 $_SESSION 总是空?这不是 PHP 配置问题

前端调 /login 成功,但后续请求 /user/profile 返回 401,var_dump($_SESSION) 是空数组。

这不是 session_start() 没调、也不是 php.ini 配错了,而是跨域下 Session ID 根本没传过来。

  • 方案一(推荐):放弃 Session,改用 JWT。登录成功后返回 token,前端存在 localStorage,后续所有请求带 Authorization: Bearer xxx
  • 方案二(若必须用 Session):Axios 设置 withCredentials: true,后端 CORS 配置中 allow_credentials 设为 true,且 origin 不能是 *
  • 额外注意:PHP 的 session.cookie_samesite 默认是 Lax,跨域请求需设为 None,同时 session.cookie_secure 必须开启(即只走 HTTPS)——开发时可临时关掉 SameSite,但上线前必须补上

真正卡住人的从来不是“会不会写 API”,而是那些不报错、不提示、只默默失效的环节:比如 BOM 头让 JSON 解析失败,比如 CORS 配置漏掉 OPTIONS,比如验证码 ID 没传过去却还在查 Session。这些点不手动验证一遍,上线前永远心里没底。

相关文章

PHP速学教程(入门到精通)
PHP速学教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2323

2023.08.11

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

6110

2024.03.19

后端的主要工作内容介绍
后端的主要工作内容介绍

后端是应用程序的服务端部分,负责核心任务,如数据库交互、业务逻辑处理和响应客户端请求。想了解更多后端的相关内容,可以阅读本专题下面的文章。

5466

2024.03.19

python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2323

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

5023

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

6110

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

5638

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

803

2024.05.22

FrankenPHP集成Laravel详细教程
FrankenPHP集成Laravel详细教程

本专题提供FrankenPHP集成Laravel的详细配置指南,全面解析运行原理、开发环境搭建、Caddyfile配置、Octane工作模式、数据库连接、队列任务、定时任务和生产环境优化,解决部署过程中常见的报错与兼容性问题。

0

2026.10.08

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
墨刀帮助中心
墨刀帮助中心

共0课时 | 0人学习

MyEclipse学习中心
MyEclipse学习中心

共0课时 | 0人学习

Apache Subversion 官方手册
Apache Subversion 官方手册

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn