PHP与Vue/React对接核心在于接口契约稳定：必须显式设置Content-Type: application/json，规范CORS头，统一JSON结构与HTTP状态码，避免空白输出和credentials配置遗漏，前端需拦截401/422并记录请求ID以精准排障。
PHP 与 Vue/React 全栈开发，核心不是“能不能连上”，而是「接口契约是否稳定、错误是否可定位、部署是否解耦」。只要后端返回的 JSON 结构清晰、HTTP 状态码合理、CORS 配置无歧义，前端框架几乎不会出兼容性问题——真正卡住进度的，往往是跨域调试失败、401 响应没被拦截、或 PHP 输出了意外空格导致 JSON 解析失败。
PHP 接口必须显式设置 Content-Type: application/json
很多 PHP 文件直接 echo json_encode(...)，但忘了设头。浏览器收到 text/html 类型响应时，fetch 不会报错，但 response.json() 会抛 SyntaxError: Unexpected token——因为实际返回的是带 HTML 模板的混合内容。
- 必须在
json_encode前调用header('Content-Type: application/json; charset=utf-8') - 避免在接口文件顶部或底部有空白行、BOM 字符或
echo/var_dump遗留输出（可用ob_clean()+ob_end_flush()临时兜底） - ThinkPHP/Laravel 等框架推荐用内置方法：
return json([...])或response()->json(...)，它们自动处理 header 和编码
Vue/React 中请求 PHP API 时，别信默认 baseURL
开发时习惯配 axios.create({ baseURL: '/api' })，但生产环境 PHP 后端可能部署在子路径（如 https://example.com/backend/），而前端静态资源托管在根域名。此时 /api/users 会被发到 https://example.com/api/users，而非后端真实地址。
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 前端应从环境变量读取 API 地址：
VUE_APP_API_BASE=https://api.example.com（Vue）或REACT_APP_API_BASE=https://api.example.com（React） - 若前后端同域且共用 Nginx，可用相对路径，但必须确认 Nginx 的
location /api代理规则已生效（常见漏配：没加proxy_pass末尾的/，导致路径重复） - 开发阶段用 Vite/Webpack Dev Server 的
proxy功能，而非改代码——它只作用于本地开发服务器，不影响生产构建
401 和 422 错误在 PHP + 前端链路中容易被吞掉
PHP 后端验证失败时，常直接 http_response_code(401) + echo json_encode(['message' => 'Unauthorized'])，但前端 axios 默认不抛错；同样，表单校验失败返回 422，若没写 error.response.data 解析逻辑，用户只会看到白屏或无限 loading。
立即学习“PHP免费学习笔记（深入）”；
- 前端务必统一拦截响应：
axios.interceptors.response.use(..., error => { if (error.response?.status === 401) { /* 跳登录页 */ } if (error.response?.status === 422) { /* 提示后端校验错误 */ } return Promise.reject(error) }) - PHP 后端不要仅靠状态码区分业务错误，建议统一用
200+code字段（如{"code": 422, "message": "...", "errors": {...}}），降低前端判断复杂度 - 日志里要记录完整请求 ID（如通过
X-Request-ID头传递），否则前后端联调时无法对齐哪次请求触发了哪个422
最常被跳过的细节是 PHP 输出缓冲和前端 fetch 的 credentials 配置——前者导致 JSON 前多出换行，后者在带 Cookie 登录态时漏设 include 就会静默 401。这两处不出问题则万事大吉，一出就是“怎么都对不上”的玄学故障。
