Hi. I’m trying to get browsersync to work with the local (Vagrant box) version of my site, and I think something inside of Trellis’s config is blocking it.
I’ve got the Trellis site deployed on a Kinsta staging environment, and if I point browsersync to that domain as a proxy, it works perfectly on local and external addresses (so browsersync itself is working). I can also vagrant up
and access the local https://mysite.test
domain of the development site, no problem.
But when I then try to proxy browsersync to https://mysite.test
and access it on https://localhost:8181
(custom port I mapped), I get a blank window that tries to load endlessly yet (apparently) never gets a response from the server.
What I’ve checked (including a few possible fixes from this thread):
- The browsersync server does launch on localhost:8181 and the external IP 192.168.x.x:8181. A netcat scan of each shows that I can connect with TCP (for example,
nc -vn 127.0.0.1 8181
). It’s definitely browsersync running there, since as soon as I stop the server with^C
, the ports close again. - The access logs inside the Vagrant box do not show any access attempts when I try to load the browsersync’d site.
- Browsersync’s own UI loads fine on localhost:3001.
- Browsersync itself doesn’t report any problems on the command line or in the UI — but also doesn’t show any browser connections.
- Turning off the custom port 8181 and trying browsersync’s default localhost:3000 doesn’t change anything.
- Turning off the macOS firewall doesn’t change anything
- Trying to proxy mysite.test without https doesn’t work either.
-
group_vars/development/wordpress_sites.yml
has the mysite.test domain set forsite_hosts -> canonical
- I’ve tested Chrome, Safari, and Firefox Dev Edition. Chrome & Safari both do the endless loading thing. Firefox shows a self-signed cert error that appears to come from browsersync, then if I accept & continue, it too “proceeds” to endless loading.
Here are the options that are currently passed to browsersync’s init method:
const serverConfig = {
proxy: "https://mysite.test",
port: "8181",
logLevel: 'debug',
}
My best guess right now is that the Vagrant server accepts the connection from browsersync, but refuses to send back any site content because of some config within Trellis.
I compared the headers coming from my Kinsta staging site (that Browsersync worked with) and mysite.test on Vagrant, and these values are being set on mysite.test but not on Kinsta:
content-security-policy: frame-ancestors 'self'
x-frame-options: SAMEORIGIN
x-xss-protection: 1; mode=block
Is one of those what’s blocking browsersync, or a corresponding internal setting in nginx? I’m past the limit of my knowledge here… Any ideas what I can try?