當通過webpack-dev-server代理訪問WordPress時，WordPress重定向到siteurl

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，我無法複製該行爲。這是應該發生的。

1. 服務器在https://localhost:9000
2. 導航到https://localhost:9000應該用相同的頁面展示我作爲導航到https://wordpress.local開始，沒有任何重定向。網站的工作原理爲https://wordpress.local，但網址爲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：我如何複製與的WebPack-DEV-服務器Browsersync行爲，而WordPress的要瘋了？

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