laravel-debugbar: Incompatible with BrowserSync Proxy

I followed the installation steps as per the readme, but kept getting the following error in the console:

Uncaught SyntaxError: Unexpected token ILLEGAL

The line causing there error is:

phpdebugbar.addDataSet({ dataset values here });

I have BrowserSync set up as a proxy server for the built-in php server so I have live CSS injection, but when trying to use BrowserSync with the debugbar I get the error above. Switching to the PHP server port fixes the issue, but then BrowserSync doesn’t work.

Local PHP server:

php -S localhost:8000

Gulp task:

gulp.task('browser-sync', function() {
 browserSync({
  proxy: "localhost:8000"
  });
});

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 19 (1 by maintainers)

Most upvoted comments

Thanks @dan-iway

Since Laravel’s artisan start at localhost:8000 by default, this might help others.

proxy: {
    target: 'localhost:8000',
    reqHeaders: function() {
        return {
            host: 'localhost:3000'
        };
    }
}

+43

pappu687 on Jul 14, 2016

This problem came up again because although the error got fixed in foxy, newer versions of browser-sync no longer use foxy but its own implementation of the rewriteLinks function, which again breaks the escaping.

I finally could fix this by using this proxy configuration for browserSync:

        proxy: {
            target: '127.0.0.1',
            reqHeaders: function () {
                return { host: 'localhost:3000' };
            }
        }

Because the proxy target does not literally match the host nothing gets rewritten when accessing the page on http://localhost:3000. Setting the host in reqHeaders additionally fixes the problem of redirects within laravel not honoring port 3000.

+11

dan-iway on Jul 8, 2016

@iforwms Try to use browser-sync v2.11.2 😃

hikouki on Apr 20, 2016