不能只用80端口跑react+php，因browserrouter刷新时请求真实路径（如/user/profile）会404，apache无法区分前端路由兜底与php脚本执行；多端口可解耦：react走3001端口配history fallback，php走80端口/api路径，同时需设homepage为"."并配置cors头。
为什么不能只用 80 端口跑 React + PHP？
因为 React 的 BrowserRouter 在刷新时会向服务器请求真实路径（比如 /user/profile），而 Apache 默认不会把这类前端路由转发给 index.html，直接返回 404。PHP 后端接口又必须走真实文件路径（如 /api/login.php）。两者混在同一个 DocumentRoot 下，Apache 无法自动区分“该交给前端路由兜底”还是“该执行 PHP 脚本”。硬塞一起，不是白屏就是 404。
改 Apache 监听多个端口比配虚拟主机更直接
如果你只是本地开发、不想改 hosts 或记一堆域名，用多端口是最省事的隔离方式：一个端口专供 React 静态服务（带 HTML5 History fallback），另一个留给 PHP 接口。操作三步：
- 编辑
XAMPP\apache\conf\httpd.conf，找到Listen 80，在下方新增一行：Listen 3001 - 在文件末尾追加一个
<virtualhost></virtualhost>块，DocumentRoot指向你的 React 构建目录（如C:/xampp/htdocs/myapp），并启用mod_rewrite - 在该
<virtualhost></virtualhost>内加入重写规则，确保所有非资源请求都落到index.html：RewriteEngine On<br>RewriteBase /<br>RewriteRule ^index\.html$ - [L]<br>RewriteCond %{REQUEST_FILENAME} !-f<br>RewriteCond %{REQUEST_FILENAME} !-d<br>RewriteRule . /index.html [L]
重启 Apache 后，React 项目访问 http://localhost:3001，PHP 接口仍走 http://localhost/api/login.php —— 路径完全解耦，不用改 basename，也不用动 homepage。
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
React 构建产物必须禁用根路径假设
即使用了独立端口，如果 package.json 里没设 "homepage": "."，构建出的 index.html 中的 script 和 link 标签仍会带 /static/ 这样的绝对路径，导致 JS/CSS 404。必须明确告诉打包工具：“我不要根路径”：
-
create-react-app项目：在package.json加"homepage": "."（注意是英文点号，不是空字符串或"./"） - Vite 项目：在
vite.config.ts设base: "./" - 否则手动改
build/index.html里的href和src，把开头的/全删掉（比如/static/js/main.x.js→static/js/main.x.js）
PHP 接口跨域问题在多端口下依然存在
浏览器认为 http://localhost:3001 和 http://localhost 是不同源，fetch 请求 PHP 接口仍会触发 CORS。不能靠“端口不同就安全”来绕过。必须在 PHP 接口响应头中显式设置：
header('Access-Control-Allow-Origin: http://localhost:3001');<br>header('Access-Control-Allow-Methods: GET, POST, OPTIONS');<br>header('Access-Control-Allow-Headers: Content-Type');
如果忘了这一步，控制台会报 Blocked by CORS policy，且错误信息里明确写出源地址是 http://localhost:3001 —— 这个细节很多人忽略，以为换端口就万事大吉。
