当使用外部 url 通过 BrowserSync 访问 WordPress 时，它会重定向到本地主机

Question

我在我的本地系统上使用 WordPress 网站，并使用 Gulp 和 Browsersync 来自动刷新我的浏览器。为此，我使用本地 Apache 服务器的代理。

这在我的本地机器上工作正常，但是当我尝试从外部访问该站点时 url 我遇到了问题。我可以通过外部 url 访问主页，但是当我点击任何 link 它重定向到本地主机，即使 href 指向外部 url.

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

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

我已经尝试在 BrowserSyncOptions 中针对代理、中间件和 rewriteRules 进行多种不同的设置，但没有任何改变这种行为。任何帮助将不胜感激！

Answer 1

可能您在 localhost:80 上运行并且您没有使用正确的代理 url。不要写 localhost:80/yoursite 而是只写 localhost/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 and these requests are made outside of the BrowserSync's proxy (i.e. http://localhost:3000/wp-content/theme/some.css）引用样式表和其他一些文件。

要解决此问题，您需要让 BrowserSync 使用 rewriteRules 重写这些链接。

以下将所有 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';
                    }
                }
            ]
        }
    ) 
 );

当使用外部 url 通过 BrowserSync 访问 WordPress 时，它会重定向到本地主机

When accessing WordPress through BrowserSync using the external url, it redirects to localhost

wordpress

gulp-browser-sync