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

Question

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

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

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

使用基本的 python 服务器(有效):

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

使用 Apache 服务器:

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

如果我单独访问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);

yourtheme/functions.php

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

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