Cannot get Browsersync working properly with Laravel Sail with Laravel Mix - laravel-mix

Question

I have managed to get Browsersync partially working, however, whenever I make a request from my app after the page has loaded, the request is sent to the wrong URL.
The following are my Browsersync settings:
mix.browserSync({
proxy: 'localhost',
port: 8082,
injectChanges: false,
open: false,
files: [
'./public/css/*.css',
'./public/js/*.js',
'./resources/views/**/*.blade.php',
'./resources/js/**/*.vue',
'./resources/css/**/*.css',
],
})
And here is my docker-compose.yml:
version: '3'
services:
laravel.test:
build:
context: ./docker/8.1
dockerfile: Dockerfile
args:
WWWGROUP: '${WWWGROUP}'
image: sail-8.0/app
working_dir: /var/www/html
extra_hosts:
- 'host.docker.internal:host-gateway'
ports:
- '${APP_PORT:-80}:80'
- "9865:22"
- "8082:8082"
- "8083:8083"
# ...
I navigate to http://localhost:8082/ and the page loads fine and Browsersync says it's connected. When I submit my form though, I get the following:
From my understanding, this is an issue with the proxy not having the port, however, I tried changing the proxy to localhost:8082 and then I couldn't even connect anymore. I also tried other suggestions of changing it to 127.0.0.1 which made no difference.

Answer 1

I fixed my issue by setting the following configuration:
mix.browserSync({
proxy: 'localhost:8081',
port: 8082,
ui: {
port: 8083,
},
injectChanges: false,
open: false,
files: [
'./public/css/*.css',
'./public/js/*.js',
'./resources/views/**/*.blade.php',
'./resources/js/**/*.vue',
'./resources/css/**/*.css',
],
watchOptions: {
usePolling: true,
interval: 500,
},
ghostMode: false,
})
Where 8081 is the APP_PORT set in the .env file. In other words, Browsersync needs to be proxied to the same port as your app is running on.