WordPress-Umleitung zur Site-URL, wenn über den Webpack-Dev-Server-Proxy darauf zugegriffen wird

Diese Frage hat historischen Wert, deshalb aktualisiere ich sie ein wenig. Es ist das Top-Ergebnis für “Webpack-Dev-Server WordPress Redirect” in Google. Während die akzeptierte Lösung für Webpack 2 funktioniert hat, funktioniert sie möglicherweise nicht mehr. Wenn dies nicht der Fall ist, können Sie auf meine verweisen WordPress-Theme-Base-Repositorydas mit Webpack 4 erstellt wurde.

Zuallererst hängt dies damit zusammen, dass WordPress auf localhost statt auf den virtuellen Host umleitet, wenn es von Webpack Dev Server weitergeleitet wird. Ich stehe vor einem ähnlichen Problem, aber die einzige Lösung hat bei mir nicht wirklich etwas gebracht.

Ich verwende WordPress 4.7 in einer Vagrant-Entwicklungsmaschine und es reagiert darauf http://wordpress.local so wie es sein sollte. Zuvor habe ich Browsersync verwendet, um meine Dateien zu überwachen und eine Aktualisierung auszulösen, und dies funktioniert wie erwartet: browser-sync start --proxy 'https://wordpress.local' --files '**/dist/js/*.js, **/*.css, **/*.php'.

Mit webpack-dev-server kann ich das Verhalten jedoch nicht replizieren. Das sollte passieren.

1. Server startet in https://localhost:9000
2. Navigieren zu https://localhost:9000 sollte mir dieselbe Seite präsentieren, zu der ich navigiere https://wordpress.local, ohne Umleitungen. Die Seite funktioniert so wie sie war https://wordpress.localaber die URL ist https://localhost:9000.
3. Änderungen passieren, Seite wird neu geladen.

Stattdessen passiert dies.

• Navigieren zu https://localhost:9000 Weiterleitungen ich auch https://wordpress.local mit einem 301. Ich habe kanonische Weiterleitungen mit deaktiviert remove_filter('template_redirect', 'redirect_canonical'); hilft aber nicht.
• Navigieren zu https://localhost:9000/404 präsentiert mir eine 404-Seite, die von meinem Theme bereitgestellt wird. Es erfolgt keine Weiterleitung.
• Navigieren zu https://localhost:9000/existing-page/ Weiterleitungen ich auch https://localhost/existing-page/ mit 301.

Was zu Hölle ist hier los? Ich habe das Problem auf WordPress eingegrenzt, da das Proxying eines Nicht-WordPress-Verzeichnisses wie erwartet funktioniert:

Direkt, Inhalt von $_SERVER: https://gist.github.com/k1sul1/0aff7ba905464ca7852f2ce00b459922

Proxy, Inhalt von $_SERVER: https://gist.github.com/k1sul1/f090aa103dc3a3cb0b339269560ac19d

Ich habe versucht, mit Headern und dergleichen herumzuspielen, ohne Glück. So sieht meine webpack.config.js aus:

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
      },
      // "https://stackoverflow.com/": { // This doesn't do much. 
        // target: url,
        // secure: false
      // }
    },
  }
};

TL;DR: Wie repliziere ich das Browsersync-Verhalten mit webpack-dev-server, ohne dass WordPress verrückt spielt?

Ich habe das schließlich gelöst. Die magischen Zeilen, die in die Proxy-Konfiguration eingehen, sind changeOrigin: true und autoRewrite: true. Diese Optionen gehen in http-Proxy-Middleware.

Jegliche Änderungen an der WordPress-Domain oder -Konfiguration sind unnötig.

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: {
        "https://stackoverflow.com/": {
          target: pjson.wptheme.proxyURL,
          secure: false,
          changeOrigin: true,
          autoRewrite: true,
          headers: {
            'X-ProxiedBy-Webpack': true,
          },
        },
      },

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

Die Werte, auf die von package.json verwiesen wird, sehen folgendermaßen aus:

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

Es liegt wahrscheinlich an den Umleitungseinstellungen Ihrer WordPress-Site. Wenn Sie auf Ihre Website über zugreifen http://localhost:9000 dann sollte das die Domäne sein, die WordPress bekannt ist.

Legen Sie es im Adminbereich von WordPress oder direkt in der Datenbank fest:

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