Apache通过同一虚拟主机内location /api/代理后端、location /服务静态前端，实现单域名分流，规避跨域并符合单入口规范。
用 apache 虚拟主机实现前端静态站点与后端 api 同域名分流，核心不是靠多个 <virtualhost></virtualhost> 块监听不同端口或域名，而是**在同一个虚拟主机内，通过请求路径（location）区分流量，并用代理机制把 /api/ 类请求转发给后端服务**。这样浏览器访问的始终是同一域名（如 https://example.com），既规避跨域问题，又符合生产环境“单入口”规范。
配置一个统一入口的虚拟主机
所有用户请求都打到同一个 <virtualhost></virtualhost> 或 <virtualhost></virtualhost>，不拆分成多个虚拟主机。关键在于内部路由逻辑：
- 匹配
/api/开头的请求 → 交给mod_proxy转发到本地或远程后端（如http://127.0.0.1:3001/） - 其余所有请求（包括
/、/assets/、/login等）→ 指向前端静态文件目录，由 Apache 直接响应 - 确保启用
mod_proxy和mod_proxy_http：运行a2enmod proxy proxy_http（Debian/Ubuntu）或确认LoadModule已加载（RHEL/CentOS）
关键 location 配置写法
在 <virtualhost></virtualhost> 内添加两个 location 块，顺序和写法直接影响行为：
-
location /api/必须写在前面，且末尾带斜杠：ProxyPass http://127.0.0.1:3001/—— 这样会自动剥离/api/前缀，后端收到的是/users而不是/api/users -
location /放在后面，设置DocumentRoot /var/www/my-app/dist，并用try_files $uri $uri/ /index.html;支持前端路由（如 Vue Router、React Router 的 history 模式） - 避免写成
location /api（无斜杠），否则可能错误匹配/apixxx；也别漏掉ProxyPassReverse，否则后端重定向响应里的 Location 头会暴露内部端口
HTTPS 场景下的注意事项
如果启用了 SSL，必须为 HTTPS 单独配一套 <virtualhost></virtualhost>，不能复用 HTTP 的 ServerAlias 或配置：
- SSL 虚拟主机里同样要写
location /api/和location /，逻辑完全一致 - 确保
SSLEngine on、证书路径正确，且ProxyPreserveHost on开启，让后端能拿到原始 Host 头 - 若后端也走 HTTPS（如
https://127.0.0.1:8443），需额外启用mod_ssl并配置信任（通常不建议本地环回走 HTTPS，徒增开销）
验证与调试技巧
配置完成后不要直接重启就上线，先做这几步检查：
立即学习“前端免费学习笔记（深入）”；
- 运行
apachectl configtest或httpd -t确认语法无误 - 查看 Apache error log（如
/var/log/apache2/error.log），搜索proxy:或client denied类关键词 - 用
curl -v http://example.com/api/test和curl -v http://example.com/分别测试，观察响应头中的X-Proxy-For或后端返回内容是否符合预期 - 前端代码中所有 API 请求保持相对路径（如
fetch('/api/users')），不写死协议+域名+端口
