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

Question

这个问题具有历史价值，因此我稍微更新了一下。在谷歌中，“webpack-dev-server wordpress redirect”的搜索结果排名最高。虽然已接受的解决方案适用于Webpack 2，但可能不再适用。如果不行，您可以参考我的wordpress-theme-base repository，该存储库使用Webpack 4构建。

---

首先，这与Webpack Dev Server代理时WordPress重定向到本地主机而非虚拟主机有关。我遇到了类似的问题，但唯一的解决方案对我并没有什么作用。

我正在一个Vagrant开发机器上运行WordPress 4.7，并且它像应该一样响应http://wordpress.local。之前我使用Browsersync来监视我的文件并触发刷新，这按预期工作：browser-sync start --proxy 'https://wordpress.local' --files '**/dist/js/*.js, **/*.css, **/*.php'。

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

1. 服务器在 https://localhost:9000 上启动。
2. 访问 https://localhost:9000 应该呈现与访问 https://wordpress.local 相同的页面，没有任何重定向。网站的工作方式与 https://wordpress.local 相同，但 URL 是 https://localhost:9000。
3. 更改发生，页面重新加载。

然而，实际情况是：

• 访问 https://localhost:9000 会发生 重定向 到 https://wordpress.local，返回 301 错误。我使用了 remove_filter('template_redirect', 'redirect_canonical'); 禁用了规范化重定向，但没有帮助。
• 访问 https://localhost:9000/404 呈现了我的主题提供的 404 页面，没有任何重定向。
• 访问 https://localhost:9000/existing-page/ 会发生 重定向 到 https://localhost/existing-page/，返回 301 错误。

到底发生了什么？我已经将问题缩小到WordPress，因为代理非WordPress目录可以按预期工作：

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

代理访问，$_SERVER的内容：https://gist.github.com/k1sul1/f090aa103dc3a3cb0b339269560ac19d

我尝试了调整头文件等操作，但没有成功。这是我的webpack.config.js的样子：

const path = require('path');
const url = 'https://wordpress.local/';
const themeDir = '/wp-content/themes/themename/';

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: url
  },
  devServer: {
    historyApiFallback: true,
    compress: true,
    port: 9000,
    https: url.indexOf('https') > -1 ? true : false,
    publicPath: themeDir,
    proxy: {
      '*': {
        'target': url,
        'secure': false
      },
      // '/': { // This doesn't do much. 
        // target: url,
        // secure: false
      // }
    },
  }
};

TL;DR: 如何在不让WordPress出问题的情况下，使用webpack-dev-server复制Browsersync的行为？

- Christian

---

感谢您提供的WP主题链接，更新的修复程序对我很有用！奇怪的是，我没有遇到任何关于重定向的问题。如果我访问代理URL，它就会直接跳转。我的问题在于网站上的所有链接（例如导航）都缺少端口号。然而，您的“headers”修复程序允许从任何地方访问WDS数据，当然解决了我的问题，因为我没有端口号！不过，我很好奇为什么我没有重定向问题... - Trevor

是的，使用代理版本时链接不会改变。以前，我使用了一些JS代码 if (module.hot) { fixLinks() } 来缓解这个问题，但现在我已经停止使用它，转而直接访问WordPress网站。@Trevor - Christian

它并不总是没有问题的，有时候当我开始一个新项目时，热重载可能无法正常工作等等，但我想这些问题都是由依赖项中的错误引起的。现在我正在开发一个嵌入到WordPress中的React应用程序。以下是配置：https://gist.github.com/k1sul1/0d8d9e83037fa2ed9c1a974e93035c25在这种情况下，我使用localhost:8080作为我的开发URL，它代理到WordPress。这样我就可以使用WordPress机制对资源进行排队，并充分利用webpack-dev-server。 - Christian

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"
},

- Christian

---

在开发过程中，如何更改主题中的链接和资源，以便自动使用localhost:8080？当我使用define('WP_HOME', 'http://localhost:8080');时，WordPress会像在您最初的问题中一样进行重定向，即使使用了changeOrigin: true和autoRewrite: true。 - bernhardw

不要设置WP_HOME。我使用了自定义标题，当通过webpack请求时，它不包含样式表，因为它不存在（通过JS加载），很可能你的目标是错误的。在这里查看changeOrigin: https://github.com/chimurai/http-proxy-middleware#http-proxy-options - Christian

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";

- Tom

---

但是这样做会失去直接访问安装程序的能力，这可能会导致问题。我几乎在开发和生产实例之间实现了完全的平衡，这会对平衡造成很大的伤害；）我认为Browsersync更像是一个中间人服务器，将我的请求发送到WordPress，不进行修改，并重写响应，以便一切正常工作。我认为我需要webpack-dev-server或类似的东西来实现这一点。 - Christian

目前我只是使用Browsersync并通过它运行Webpack，但我更愿意通过dev-server运行它，因为它更快。 - Christian

显然，我可以使用define()在不实际操作数据库的情况下更改wp-config中的siteurl和home。 我只需要以某种方式将我正在使用的webpack-dev-server告知WordPress并应用略有不同的配置即可。 devServer设置中的头信息可能有效。点赞。 - Christian