Question

首先，这与Wordpress redirecting to localhost instead of virtual host when being proxied by Webpack Dev Server有关。我面临着类似的问题，但唯一的解决方案并没有真正为我做任何事情。

我在Vagrant开发机器中运行WordPress 4.7，它就像它应该响应http://wordpress.local。以前我使用Browsersync来查看我的文件并触发刷新，这可以按预期工作：browser-sync start --proxy 'https://wordpress.local' --files '**/dist/js/*.js, **/*.css, **/*.php'。

但是，使用webpack-dev-server我无法复制该行为。这是应该发生的事情。

服务器以https://localhost:9000
导航到https://localhost:9000会向我显示与导航到https://wordpress.local相同的页面，而不会显示任何重定向。网站的工作原理为https://wordpress.local，但网址为https://localhost:9000。
发生了更改，页面重新加载。

相反，这种情况发生了。

使用301导航到https://localhost:9000 重定向我到https://wordpress.local。我已使用remove_filter('template_redirect', 'redirect_canonical');禁用了规范重定向，但没有帮助。
导航到https://localhost:9000/404向我展示了由我的主题提供的404页面。没有重定向发生。
使用301导航至https://localhost:9000/existing-page/ 重定向}。

到底是怎么回事？我已将问题缩小到WordPress，因为代理非WordPress目录按预期工作：

直接，$ _SERVER的内容：https://gist.github.com/k1sul1/0aff7ba905464ca7852f2ce00b459922

Proxied，$ _SERVER的内容：https://gist.github.com/k1sul1/f090aa103dc3a3cb0b339269560ac19d

我试过玩标题等等，没有运气。这是我的webpack.config.js的样子：

https://localhost/existing-page/

TL; DR：如何在没有WordPress疯狂的情况下使用webpack-dev-server复制Browsersync行为？

Answer 1

我最终解决了这个问题。进入代理配置的神奇线条是changeOrigin: true和autoRewrite: true。这些选项会进入http-proxy-middleware。

不需要对WordPress域或配置进行任何更改。

const path = require('path');
const pjson = require(path.join(__dirname, '..', 'package.json'));

const isWin = /^win/.test(process.platform);
const isMac = /^darwin/.test(process.platform);
const isHTTPS = pjson.wptheme.proxyURL.includes('https');

exports.devServer = ({ host, port } = {}) => {
  const options = {
    host: host || process.env.HOST || 'localhost', 
    port: port || process.env.PORT || 8080,
  };
  options.publicPath = (isHTTPS ? 'https' : 'http') + '://' + options.host + ':' + options.port + pjson.wptheme.publicPath;

  return {
    devServer: {
      watchOptions: {
        poll: isWin || isMac ? undefined : 1000,
        aggregateTimeout: 300,
      },

      https: isHTTPS,
      stats: 'errors-only',
      host: options.host,
      port: options.port,
      overlay: {
        errors: true,
        warnings: false,
      },

      open: true,
      hotOnly: true,

      proxy: {
        '/': {
          target: pjson.wptheme.proxyURL,
          secure: false,
          changeOrigin: true,
          autoRewrite: true,
          headers: {
            'X-ProxiedBy-Webpack': true,
          },
        },
      },

      publicPath: options.publicPath,
    },
  };
};

package.json引用的值如下所示：

"wptheme": {
  "publicPath": "/wp-content/themes/themefolder/dist/",
  "proxyURL": "https://wordpress.local"
},

Answer 2

这可能是您的Wordpress网站的重定向设置。如果您通过http://localhost:9000访问您的网站，那么应该是Wordpress知道的域名。

在Wordpress的管理员或直接在数据库中设置：

UPDATE `wp_options` SET `option_value` = "http://localhost:9000" WHERE `option_name` = "siteurl" OR `option_name` = "home";

当通过webpack-dev-server代理访问时，WordPress重定向到siteurl

2 个答案: