当被 Webpack Dev Server 代理时，Wordpress 重定向到 localhost 而不是虚拟主机

Question

我正在尝试做一个相对简单的设置：

• 具有 HTML 虚拟主机的 Apache 服务器。
• Webpack 和 Webpack Dev Server 用于资产重新加载和生成。

为此，Webpack Dev Server proxies 另一个服务器传递它不知道如何处理的请求。

使用基本的 python 服务器（有效）：

1. 在http://localhost:5000 上启动python 网络服务器。
2. 运行 npm start。
3. Webpack Dev Server 使用 http://localhost:9090 启动和代理 python 服务器。
4. 访问 http://localhost:9090 并查看 python 服务器和 Webpack 资产的 HTML 结果。

使用 Apache 服务器：

1. 启动 Apache 服务器。
2. 运行 npm start。
3. Webpack 开发服务器使用http://localhost:9090 启动并代理 Apache 服务器。
4. 访问 localhost:9090 浏览器会自动重定向到http://localhost 并显示“It works!”。

如果我在浏览器中单独访问http://vhost.name，我会看到正确的 HTML。我的环境是默认的 Apache 服务器版本：Mac OSX El Capitan 上的 Apache/2.4.16 (Unix)。

package.json

"scripts": {
  "test": "node server.js",
  "start": "npm run start-dev-server",
  "start-dev-server": "webpack-dev-server 'webpack-dev-server/client?/' --host 0.0.0.0 --port 9090 --progress --colors",
  "build": "webpack"
},

webpack.config.js

/*global require module __dirname*/
var webpack = require('webpack');

module.exports = {
    entry: {
        app: [
            'webpack-dev-server/client?http://localhost:9090',
            'webpack/hot/only-dev-server',
            './src/app.js'
        ]
    },
    output: {
        path: __dirname + '/dist',
        filename: '[name]_bundle.js',
        publicPath: 'http://localhost:9090/dist'
    },
    devServer: {
        historyApiFallback: true,
        proxy: {
            // Python server: works as expected at localhost:9090
            // '*': 'http://localhost:5000'

            // Apache virtual host: redirects to localhost instead of
            // serving localhost:9090
            '*': 'http://vhost.name'
        }
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};

httpd-vhosts.conf

<VirtualHost vhost.name:80>
    DocumentRoot "/Path/To/vhost.name"
    ServerName vhost.name
        <Directory "/Path/To/vhost.name">
            Options FollowSymLinks Indexes MultiViews
            AllowOverride All
            # OSX 10.10 / Apache 2.4
            Require all granted
        </Directory>
</VirtualHost>

主机

127.0.0.1   localhost

127.0.0.1   vhost.name

Answer 1

Wordpress 对来自不同来源的内容使用 canonical URLs to help normalize URLs：

[Y]您无法控制链接到您的人，第三方在键入或复制粘贴您的网址时可能会出错。这种规范的 URL 退化有一种传播方式。也就是说，站点 A 使用非规范 URL 链接到您的站点。然后站点 B 看到站点 A 的链接，并将其复制粘贴到他们的博客中。如果您允许非规范 URL 留在地址栏中，人们会使用它。这种使用对您的搜索引擎排名有害，并损害构成网络的链接网络。通过重定向到规范 URL，我们可以帮助阻止这些错误传播，并至少为人们在链接到您的博客时可能犯的错误生成 301 重定向。

这种重写是在尝试代理时剥离 Webpack-dev-server 端口号的原因。解决方案是在你的 theme/functions.php 中添加：

remove_filter('template_redirect', 'redirect_canonical');

我们显然不希望它在实时站点上运行，因此在 wp_config.php 中添加一个变量以根据环境进行设置：

wp-config.php

// Toggle to disable canonical URLs to allow port numbers.
// Required for Webpack-dev-server proxying.
define('DISABLE_CANONICAL', 'Y', true);

yourtheme/functions.php

// Hack for Webpack dev server
if (DISABLE_CANONICAL == 'Y') {
    remove_filter('template_redirect', 'redirect_canonical');
}

我在浏览器“缓存”之前的 URL 重定向时遇到了问题，因此当您进行更改时，它可能不会立即出现。尝试以隐身模式打开 URL，使用其他浏览器，或重新启动 Webpack 和 Apache 服务器。