由Webpack Dev Server代理时，Wordpress重定向到本地主机而不是虚拟主机 [英] Wordpress redirecting to localhost instead of virtual host when being proxied by Webpack Dev Server

问题描述

我正在尝试进行以下相对简单的设置:

I am trying to do a relatively simple set up with:

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

要完成此操作，请 Webpack Dev Server proxies 服务器处理不知道如何处理的请求.

To accomplish this, the Webpack Dev Server proxies the other server to pass through requests that it doesn't know how to handle.

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

Using a basic python server (which works):

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

1. Start the python webserver on http://localhost:5000.
2. Run npm start.
3. Webpack Dev Server starts and proxies the python server using http://localhost:9090.
4. Visit http://localhost:9090 and see HTML result of python server plus Webpack assets.

使用Apache服务器:

Using Apache server:

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

1. Start the Apache server.
2. Run npm start.
3. Webpack dev server starts and proxies the Apache server using http://localhost:9090.
4. Visit localhost:9090 the browser automatically redirects to http://localhost and displays "It works!".

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

If I separately visit http://vhost.name in the browser I see the correct HTML. My environment is the default Apache Server version: 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

推荐答案

Wordpress使用规范URL，以帮助规范来自不同来源的内容的URL :

Wordpress uses canonical URLs to help normalize URLs for content from different sources:

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

[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:

This rewriting is what strips the Webpack-dev-server port number when attempting to proxy. The solution is to add in your theme/functions.php:

remove_filter('template_redirect', 'redirect_canonical');

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

We obviously don't want this running on the live site, so add a variable to the wp_config.php to set depending on environment:

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服务器.

I have experienced issues with the browser "caching" the previous URL redirect, so when you make a change it may not appear immediately. Try opening the URL in incognito mode, using a different browser, or restarting the Webpack and Apache servers.

这篇关于由Webpack Dev Server代理时，Wordpress重定向到本地主机而不是虚拟主机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！