如何在 XAMPP 环境中部署 React 项目并配合 PHP 后端-php教程-PHP中文网

React项目部署到XAMPP需四步：设homepage为"/react"、BrowserRouter加basename="/react"、.htaccess配置RewriteBase /react/并重写至index.html、PHP接口放htdocs/api下且配CORS头。

如何在 xampp 环境中部署 react 项目并配合 php 后端

React 项目不能直接扔进 XAMPP 的 htdocs 目录就跑起来——它不是纯静态 HTML，而是依赖前端路由、资源路径和构建产物结构的单页应用（SPA）。PHP 后端也不能靠 npm start 启动，必须由 Apache 或其他 PHP 兼容服务器执行。两者要共存，关键在路径隔离与请求分发。

React 构建产物必须适配子路径（如 /react）

如果你把 React 项目 build 后放在 htdocs/react 下，但没改配置，访问 http://localhost/react/ 会加载 HTML，但所有 JS/CSS 路径仍默认从根目录（/static/）请求，404 就不可避免。

在 package.json 中设 "homepage": "/react"（不是完整 URL，也不是 ./react）
npm run build 后检查 build/index.html 中的 <script></script> 和标签，路径是否都带 /react/static/
如果用了 BrowserRouter，必须加 basename="/react"，否则路由跳转后刷新直接 404

Apache 必须重写前端路由到 index.html

XAMPP 自带的 Apache 默认把 /react/some-path 当作真实文件或目录处理，找不到就返回 404。但 React 的路由是客户端行为，所有路径都该 fallback 到 index.html。

在 htdocs/react/.htaccess 中放以下内容（确保 Apache 的 mod_rewrite 已启用）：

RewriteEngine On
RewriteBase /react/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /react/index.html [L]

若用 Windows 版 XAMPP，检查 httpd.conf 中 AllowOverride All 是否对 htdocs 目录生效
别漏掉 RewriteBase —— 它必须和 homepage 值一致，否则重写目标错位

PHP 接口不能放在 React 源码里直调

开发时用 npm start，Axios 请求 /api/login.php 看似能发出去，其实是因为 Webpack Dev Server 把这类请求代理到了 PHP 服务；但 build 后扔进 XAMPP，浏览器会直接向 http://localhost/react/api/login.php 发请求——而这个路径下根本没 PHP 文件，Apache 也不会执行它。

shopify-app-react-router

构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G

下载

PHP 文件必须放在 Apache 可执行的路径下，比如 htdocs/api/login.php，而非 src/api/ 或 build/api/
Axios 请求 URL 改成绝对路径：http://localhost/api/login.php，而不是相对路径 /api/login.php（后者会被拼成 /react/api/login.php）

PHP 文件开头务必加 CORS 头，否则浏览器因跨域拦截：

header("Access-Control-Allow-Origin: http://localhost");
header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type");