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

Question

我正在尝试使用以下方法进行相对简单的设置：

具有 HTML.
用于资产重新加载和生成的 Webpack 和 Webpack Dev Server。

为了完成这个，Webpack Dev Server proxies 另一台服务器通过它不知道如何处理的请求。

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

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

使用 Apache 服务器：

启动 Apache 服务器。
运行 npm 开始。
Webpack 开发服务器启动并使用 http://localhost:9090 代理 Apache 服务器。
访问localhost:9090浏览器自动重定向到http://localhost并显示"It works!".

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

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]ou can’t control who links to you, and third parties can make errors when typing or copy-pasting your URLs. This canonical URL degeneration has a way of propogating. That is, Site A links to your site using a non-canonical URL. Then Site B see’s Site A’s link, and copy-pastes it into their blog. If you allow a non-canonical URL to stay in the address bar, people will use it. That usage is detrimental to your search engine ranking, and damages the web of links that makes up the Web. By redirecting to the canonical URL, we can help stop these errors from propagating, and at least generate 301 redirects for the errors that people may make when linking to your blog.

这种重写是在尝试代理时去除 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);

你的theme/functions.php

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

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

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

Wordpress redirecting to localhost instead of virtual host when being proxied by Webpack Dev Server

apache

proxy

virtualhost

webpack-dev-server