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

Question

这个问题有历史价值，所以我稍微更新一下。这是 "webpack-dev-server wordpress redirect" 在 Google 中的最高结果。虽然公认的解决方案适用于 Webpack 2，但它可能不再适用。如果不行可以参考我的wordpress-theme-base repository，它是用Webpack 4构建的

首先，这与有关。我面临着类似的问题，但唯一的解决方案并没有真正为我做任何事情。

我是运行 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 一样工作，但 URL 是 https://localhost:9000。
更改发生，页面重新加载。

相反，这种情况发生了。

导航到 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，因为代理 non-WordPress 目录按预期工作：

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

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

我试过 headers 之类的，但没有成功。这是我的 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 行为？

Answer 1

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

在 Wordpress 的后台或直接在数据库中设置：

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

Answer 2

我最终确实解决了这个问题。进入代理配置的魔法线是 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"
},

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

WordPress redirecting to siteurl when accessed via webpack-dev-server proxy

wordpress

redirect

webpack

webpack-dev-server

webpack-2