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

Question

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

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

为此,Webpack Dev Server proxies另一台服务器要传递不知道如何处理的请求.

使用基本的python服务器(可以工作):

1. 在http:// localhost:5000上启动python webserver .
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 dev服务器使用http:// localhost:9090启动并代理Apache服务器.
4. 访问localhost:9090浏览器自动重定向到http:// localhost并显示"It works!".

如果我在浏览器中单独访问http://vhost.name,我会看到正确的HTML.我的环境是默认的Apache Server版本: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使用规范网址来帮助规范化来自不同来源的内容的网址:

[Y]您无法控制链接到您的人,第三方在输入或复制粘贴您的网址时可能会出错.这种规范的URL退化有一种传播方式.也就是说,站点A使用非规范URL链接到您的站点.然后,站点B查看站点A的链接,并将其复制粘贴到他们的博客中.如果您允许非规范网址留在地址栏中,则人们会使用它.这种用法不利于您的搜索引擎排名,并损害构成Web的链接网络.通过重定向到规范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服务器.