如何在Apache中利用虚拟主机实现前端静态站点与后端API接口的同域名分流-Apache-PHP中文网

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 或配置：

前端开发

ys-agent 前端（frontend/）功能迭代的工程规范守门 skill。当任何 agent 接到 ys-agent 前端相关任务时——新增页面、新增组件、加 API、加 Pinia store、改路由、写 mock、调整布局、修改样式、对接后端接口、迁移 demo 代码、做主题、加权限、写公共组件、做数据可视化、做表单、做弹窗、做表格、做搜索过滤、调 Element Plus 用法、做响应式、做性能优化，或仅仅是在 frontend/ 目录下编辑任何 .vue / .ts / .scss / .c

下载

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')），不写死协议+域名+端口