Browser-sync proxy not loading with Laravel

Question

I'm using browser-sync (v 2.27.9) and browser-sync-webpack-plugin (v 2.3.0) in my Laravel 8 project. I've never had any problems with my setup until I cloned my project on a brand new Mac Studio with MacOS Monterey (v12.3). Until now, Browser-sync has always proxied localhost:8000 and loaded up just fine on localhost:3000.

localhost:8000 is loading normally, it's just the browser-sync proxy that does not load. The browser-sync UI loads just fine on port 3001 as well. I have tried re-installing both npm packages, restarting my computer, killing all ports, starting and re-starting the php development server, running npm run watch over and over, checking in multiple browsers, and trying 127.0.0.1 instead of "localhost".

Here's my webpack.mix.js settings, which again have always worked in the past:

    .browserSync({
        proxy: 'http://localhost:8000/',
        files: [
            'app/**/*',
            'public/**/*',
            'resources/views/**/*',
            'resources/js/**/*' ,
            'resources/js/**/*/*',
            'resources/lang/**/*',
            'routes/**/*',
        ],
    })

And I am seeing a permanent spinning icon in the browser at localhost:3000. In the developer tools Network tab, it says localhost has a status of (pending).

In the browser-sync help page, it says "99% of the time, it's because your web page doesn't have a body tag". I have confirmed my website has a body tag, so this problem must fall in the 1% category.

Answer 1

Figured it out. I needed to change "localhost" to 127.0.0.1 in the proxy URL. Still unclear why localhost has worked in the past but does not work now.

    .browserSync({
        proxy: 'http://127.0.0.1:8000/',

Answer 2

In my case commenting this entry in /etc/hosts helped

 #::1    localhost

source: Chrome can't open localhost:3000 with Gulp / BrowserSync