Webpack devServer代理线上PHP站点遇虚拟主机解析异常求助

看起来你的核心问题是Webpack DevServer的代理没有正确传递虚拟主机的Host头，导致服务器返回了默认站点而不是my.site.it对应的内容。因为PHP虚拟主机是通过请求的Host字段来区分不同站点的，DevServer默认代理时可能没有正确设置这个头。

下面是针对你配置的具体调整方案：

1. 修正Proxy配置，传递正确的Host头 #

在你的proxy配置里，需要明确添加headers来设置Host为目标站点的域名，同时调整一些冗余的配置项：

devServer: {
    quiet: false,
    stats: { colors: true },
    proxy: {
        '/': {
            target: 'http://my.site.it',
            secure: false,
            changeOrigin: true,
            // 关键：添加Host头，让服务器识别到对应的虚拟主机
            headers: {
                'Host': 'my.site.it'
            },
            // 移除不必要的配置：protocol和port已经在target里指定了
            // "protocol": 'http:',
            // "port": 80,
            // ignorePath设为true会忽略请求路径，可能导致资源加载异常，建议去掉
            // ignorePath: true,
        }
    },
    overlay: { warnings: true, errors: true },
    disableHostCheck: true,
    // 因为你是代理到远程站点，contentBase可以去掉，避免本地静态文件干扰
    // contentBase: path.join(__dirname, '../../../../../../../httpdocs'),
    hot: true,
    https: false,
    open: true,
    noInfo: false
}

2. 为什么这样调整？ #

• changeOrigin: true会让DevServer在代理请求时修改Origin头，但有些服务器还需要Host头来匹配虚拟主机，所以手动添加Host是关键。
• 移除ignorePath: true：这个选项会把请求路径清空，比如你访问localhost/styles/styles.min.css会被代理成http://my.site.it/，而不是正确的路径，这会导致资源加载错误。
• 去掉contentBase：因为你是代理到线上开发站点，不需要DevServer提供本地静态文件，否则可能出现本地文件覆盖远程资源的情况。

3. 额外建议 #

• 确保你的本地机器能正常访问http://my.site.it（可以先在浏览器里测试），如果本地无法访问，代理也会失效。
• 如果需要热模块替换（HMR），确保你已经在plugins里添加了HotModuleReplacementPlugin，否则hot: true不会生效。

修改完配置后，重启Webpack DevServer，再访问http://localhost（或者你指定的port），应该就能看到my.site.it的正确站点了，同时编译后的JS/CSS会通过DevServer注入到页面中，实现实时同步。

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