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

First of all, this is related to WordPress redirecting to localhost instead of virtual host when being proxied by Webpack Dev Server. I’m facing a similar problem, but the only solution didn’t really do anything for me.

I’m running WordPress 4.7 inside a Vagrant development machine, and it responds to http://wordpress.local just like it should. Previously I’ve used Browsersync to watch my files and trigger a refresh, and this works as expected: browser-sync start --proxy 'https://wordpress.local' --files '**/dist/js/*.js, **/*.css, **/*.php'.

However, with webpack-dev-server I’m unable to replicate the behaviour. This is what should happen.

  1. Server starts in https://localhost:9000
  2. Navigating to https://localhost:9000 should present me with the same page as navigating to https://wordpress.local, without any redirections. Site works as it was https://wordpress.local, but the URL is https://localhost:9000.
  3. Changes happen, page gets reloaded.

Instead, this happens.

  • Navigating to https://localhost:9000 redirects me to https://wordpress.local with a 301. I’ve disabled canonical redirects with remove_filter('template_redirect', 'redirect_canonical'); but doesn’t help.
  • Navigating to https://localhost:9000/404 presents me a 404 page that is provided by my theme. No redirect happens.
  • Navigating to https://localhost:9000/existing-page/ redirects me to https://localhost/existing-page/ with a 301.

What on earth is going on? I’ve narrowed the problem to WordPress, as proxying a non-WordPress directory works as expected:

Direct, contents of $_SERVER: https://gist.github.com/k1sul1/0aff7ba905464ca7852f2ce00b459922

Proxied, contents of $_SERVER: https://gist.github.com/k1sul1/f090aa103dc3a3cb0b339269560ac19d

I’ve tried playing around with headers and such, without luck. Here’s what my webpack.config.js looks like:

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: How do I replicate Browsersync behaviour with webpack-dev-server without WordPress going crazy?

Read more here: WordPress redirecting to siteurl when accessed via webpack-dev-server proxy

Leave a Reply

Your email address will not be published. Required fields are marked *