当使用外部URL通过BrowserSync访问WordPress时，它会重定向到localhost

Question

我正在从本地系统开发WordPress网站，并使用带有Browsersync的Gulp在更改时自动刷新浏览器。为此，我正在使用本地Apache服务器的代理。

这在我的本地计算机上工作正常，但是当我尝试从外部 url 访问该站点时，我遇到了问题。我能够通过外部 url 访问主页，但是当我单击任何链接时，即使 href 指向外部 url，它也会重定向到 localhost。

我知道WordPress总是提供完整的url，这可能会导致链接绕过浏览器同步，但为了确保不会发生这种情况，我已经配置了WP_HOME和WP_SITEURL指向端口3000，BrowserSync侦听。

define( 'WP_HOME', 'http://flare-dev.local:3000' );
define('WP_SITEURL','http://flare-dev.local:3000' );

这是我的浏览器同步设置： 相关部分在 gulpfile.js

var browserSync = require( 'browser-sync' ).create();
var cfg = require( './gulpconfig.json' );
gulp.task( 'browser-sync', function() {
browserSync.init( cfg.browserSyncWatchFiles, cfg.browserSyncOptions );
} );

gulpconfig.json中的相关部分：

"browserSyncOptions" : {
"proxy": {
"target": "localhost:80/"
},
"notify": false,
"open": false,
"host": "flare-dev.local",
"port": 3000
},
"browserSyncWatchFiles" : [
"./css/*.min.css",
"./js/*.min.js",
"./**/*.php"
]

我已经在浏览器同步选项中尝试了代理，中间件和重写规则的多个不同设置，但没有任何改变这种行为。任何帮助将不胜感激！

Answer 1

可能您正在 localhost：80 上运行，并且您没有使用正确的代理 url。 不要写本地主机：80/yoursite，而只写本地主机/yoursite

browserSync.init({
proxy: {
target: "http://localhost/yoursite/"
}
});
Rest you know, use reload with gulp.watch.
export const reload = (done) => {
browserSync.reload();
done();
}

休息你知道，使用gulp.watch重新加载。 例如gulp.watch('**/*.php', reload);

Answer 2

您遇到此问题是因为 Wordpress 通过完整的 URL 引用样式表和其他一些文件，例如 http://localhost:80/wp-content/theme/some.css，并且这些请求是在 BrowserSync 的代理(即 http://localhost:3000/wp-content/theme/some.css(之外发出的。

要解决此问题，您需要要求浏览器同步使用重写规则重写这些链接。

以下内容会将所有 localhost：80 重写为 localhost：3000，强制所有流量直接通过 BroswerSync 而不是 Apache。

rewriteRules: [
{
match: /localhost:80/g,
fn: function (req, res, match) {
return 'localhost:3000';
}
}
]

PS：按照此处其他答案的建议进行正确的代理设置也是必不可少的。

proxy: {
target: "http://localhost/yoursite/"
}

另请注意，由于重写函数是Javascript而不是JSON对象，因此您需要将其置于gulpconfig.json之外。您需要直接将其合并到gulpfile.js.而不是：

browserSync.init( cfg.browserSyncWatchFiles, cfg.browserSyncOptions );

您将需要类似的东西

browserSync.init(
cfg.browserSyncWatchFiles, 
Object.assign(
cfg.browserSyncOptions, {
rewriteRules: [
{
match: /localhost:80/g,
fn: function (req, res, match) {
return 'localhost:3000';
}
}
]
}
) 
);