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

I am working on a WordPress site from my local system and using Gulp with Browsersync to automatically refresh my browser on changes. For this I am using a proxy to my local Apache server.

This works fine from my local machine, but when I try to access the site from the external url I have an issue. I am able to access the homepage just fine through the external url but when I then click on any link it redirects to localhost even though the href points to the external url.

I know that WordPress always provides the full url and this can cause a link to bypass browsersync but to ensure this doesn't happen I have configured WP_HOME and WP_SITEURL to point to port 3000, which BrowserSync listens to.

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

Here is my browsersync setup: Relevant sections in gulpfile.js

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

Relevant sections in 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"
  ]

I've tried multiple different settings in BrowserSyncOptions for proxy, middleware and rewriteRules but nothing changes this behaviour. Any help would be much appreciated!

Probably You are running on localhost:80 and you are not using correct proxy url. Dont write localhost:80/yoursite instead write localhost/yoursite only

browserSync.init({
        proxy: {
            target: "http://localhost/yoursite/"
        }
});

Rest you know, use reload with gulp.watch.

export const reload = (done) => {
    browserSync.reload();
    done();
}

Rest you know, use reload with gulp.watch. e.g. gulp.watch('**/*.php', reload);