通过webpack-开发服务器代理访问时,WordPress重定向至站点URL [英] WordPress redirecting to siteurl when accessed via webpack-dev-server proxy
问题描述
此问题具有历史价值,因此我对其进行了一些更新。这是谷歌"webpack-开发-服务器wordpress重定向"的最高搜索结果。虽然被接受的解决方案对webpack 2号有效,但它可能不再有效。如果没有,您可以参考我的wordpress-theme-base repository,它是用webpack 4构建的。
首先,这与Wordpress redirecting to localhost instead of virtual host when being proxied by Webpack Dev Server有关。我正面临着类似的问题,但唯一的解决方案并没有真正为我做任何事情。
我在一台Vagant开发机器中运行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,因为代理非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疯狂的情况下使用WordPress-dev-SERVER复制浏览器同步行为?
推荐答案
我最终解决了这个问题。进入代理配置的魔术行是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-开发服务器代理访问时,WordPress重定向至站点URL的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!