使用Docker搭配Browser Sync时如何修复HTTP_HOST问题

核心原因 #

当BrowserSync代理Docker容器时，默认会将请求的Host头设置为容器名称（my-project-name），导致PHP的$_SERVER['HTTP_HOST']读取到容器名而非你访问的localhost:3000。Kirby CMS会基于这个HTTP_HOST生成资源链接，浏览器无法解析容器名，因此图片等资源加载失败。

方法一：修改BrowserSync代理配置（推荐） #

在docker-compose.yml的browser-sync服务命令中，添加--changeOrigin和--proxy-header参数，强制转发请求时使用正确的Host头：

修改后的browser-sync服务配置：

browser-sync:
  image: node:lts-alpine
  container_name: browser-sync
  working_dir: /app
  volumes:
    - ${PWD}:/app
  ports:
    - "3000:3000"
    - "3001:3001"
  command: >
    sh -c "npm install && npx browser-sync start --proxy 'my-project-name' --files '/app/**/*' --port 3000 --ui-port 3001 --reload-delay 500 --reload-debounce 500 --no-open --changeOrigin --proxy-header 'Host: localhost:3000'"

• --changeOrigin：让BrowserSync调整请求的Origin头，匹配目标代理地址
• --proxy-header 'Host: localhost:3000'：强制将转发到容器的请求Host头设置为你访问的地址，确保PHP读取到正确的HTTP_HOST

方法二：强制设置Kirby站点URL #

如果不想修改代理配置，可以直接在Kirby的配置文件中指定固定站点URL，忽略HTTP_HOST的值：

在项目的site/config/config.php中添加以下配置：

return [
  'url' => 'http://localhost:3000'
];

这样Kirby会始终使用这个URL生成资源链接，不受HTTP_HOST影响。

验证修改 #

重启Docker容器后，访问localhost:3000：

• 查看图片等资源的链接，应该是http://localhost:3000/...格式
• 再次调用phpinfo()，确认$_SERVER['HTTP_HOST']的值为localhost:3000

内容的提问来源于stack exchange，提问作者user1030151