search

BrowserSync / browser-sync

Keep multiple browsers & devices in sync when building websites. https://browsersync.io
https://discord.gg/2d2xUThp
Apache License 2.0
12.18k stars 758 forks source link

Proxying a URL with a port doesn't work correctly #131

Closed troytc closed 10 years ago

troytc commented 10 years ago

I use Vagrant to develop my Laravel 4 project. In my Vagrantfile I have the following line to enable a port passthrough:

config.vm.network :forwarded_port, host: 7000, guest: 80

Then I run browser-sync with the following command:

browser-sync start --proxy "localhost:7000"

This loads the page with no external styles, scripts, or images. All of them are linked to http://localhost/assets/... rather than http://localhost:7000/assets/.... What is the cause of this problem (the port being dropped by browser-sync)?

shakyShane commented 10 years ago

Hi there - sorry for the late reply.

Are you using the URL provided by BrowserSync to access the site?

BrowserSync should re-write all URLs to something like http://192.126.56.65:3002/assets - if not, then there's a certainly a bug.

could you paste a larger snippet showing the HTML markup that your app produces when not using BrowserSync, and then another with the HTML served through the proxy?

Thanks

troytc commented 10 years ago

I am using the URL given in the Terminal (http://192.168.1.23:3002). When accessing it with Vagrant at localhost:7000 I get:

<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Title</title>
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="http://localhost:7000/css/bootstrap.min.css">
        <link rel="stylesheet" href="http://localhost:7000/css/main.css">
...

When accessing with BrowserSync at 192.168.1.23:3002 I get:

<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Title</title>
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="http://localhost/css/bootstrap.min.css">
        <link rel="stylesheet" href="http://localhost/css/main.css">
...

It seems to be dropping the port used by Vagrant. Thanks for the help :)

shakyShane commented 10 years ago

The expected output from the proxy URL would be:

<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Title</title>
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="http://192.168.1.23:3002/css/bootstrap.min.css">
        <link rel="stylesheet" href="http://192.168.1.23:3002/css/main.css">
...

which means there's definitely a bug.

Thanks for reporting - I'll be looking into it.

troytc commented 10 years ago

Thanks. For reference, I am using Vagrant with Apache, serving a Laravel 4.1 app.

shakyShane commented 10 years ago

Thanks! & don't forget you can always use the snippet instead until I have a fix for this.

khalidl commented 10 years ago

Thought it was something with my setup, but I encountered something similar.
I’m using VirtualHostX to set up a vhost and use that in my gulpfile.js like this:

gulp.task('browser-sync', function() {
    browserSync.init(null, {
        proxy: "foobar.dev:5000"
    });
});

(For the good order, the same thing happens when setting the vhost’s corresponding local IP-address and port as proxy.)

When using the URL given by BrowserSync the page loads without external assets, similar to what happens to @raptblue. And when trying to navigate to other pages it’ll link to whatever other project is set on port 80. For example a link to http://192.168.178.22:3005/about, becomes http://192.168.178.22/about.

For now, as a workaround, I’m copying the snippet directly into the page(s).

Would love to see this solved. Thanks for any help! :)

P.S. I’m using KirbyCMS by the way.

shakyShane commented 10 years ago

Can you guys upgrade to 0.8.2 & let me know if this is still an issue

khalidl commented 10 years ago

Unfortunately almost the same issue.

I can get it to work if the project is on port 80. Anything other than that will cause the issue described above.

But it still somehow loads up assets which are hardcoded, like stylesheets and images, with any port-number. The source will look like this: <link rel="stylesheet" href="http://192.168.178.22/assets/styles/styles.css" />. <img src="http://192.168.178.22/assets/images/logo.png" /> Funny thing is that on both the port-number is missing, but it still works. But if they're generated dynamically (through PHP), they'll fail. Same goes for internal links.

Although it isn't specific to KirbyCMS, maybe you can quickly install – it’s really light – and see what’s going on?

If you need more info or any testing, please let me know. Thanks!

troytc commented 10 years ago

I'm on 0.8.2 and still seeing the same issue as before.

khalidl commented 10 years ago

@raptblue can you change the title of this issue to reflect that this isn't isolated to Vagrant only?

troytc commented 10 years ago

@khalidl sure, no problem

khalidl commented 10 years ago

Small update on my side.

I've changed my workflow a bit. Every project is now running on localhost and port 80, as opposed to local IP + unique port.

In my gulpfile.js I have removed the unique port number from the vhost domain name:

gulp.task('browser-sync', function() {
    browserSync.init(null, {
        proxy: "foobar.dev"
    });
});

Everything works like a charm so far; BrowserSync re-writes all URLs correctly, and all assets are loaded as should be :smile:

Thanks!

shakyShane commented 10 years ago

Awesome :)

ghost commented 10 years ago

Same thing happens for me using browser-sync 0.9.1 I'm using the Google Appengine SDK http server. When i configure it to use port 80 browser-sync works. If i leave at it's default of 8080 browser sync doesn't because it removes the 8080 from the rewritten url's.

shakyShane commented 10 years ago

@Dennis-Janssen does this happen to all URLS on a page?

ghost commented 10 years ago

Hard to say since the page only contains one link. It's the action on a form to login. Since logging in fails it's hard to test any further. Does this clarify anything? If not i'll think about setting up a test to investigate further.

ghost commented 10 years ago

Hold on.... i might be on to something...

When I leave the GAE SDK server on it's default port of 8080, then launch browser-sync with --proxy "localhost:8080" and click the login button in my app i get the following html

<html>
<head>
  <title>Login</title>
</head>
<body>
<form method="get" action="http://localhost/_ah/login"
      style="text-align:center; font: 13px sans-serif">
    <h3>Not logged in</h3>
    <p style="padding: 0; margin: 0">
      <label for="email" style="width: 3em">Email:</label>
      <input name="email" type="email" value="test@example.com" id="email"/>
    </p>
    <p style="margin: .5em 0 0 3em; font-size:12px">
      <input name="admin" type="checkbox" value="True"
        id="admin"/>
        <label for="admin">Sign in as Administrator</label>
    </p>
    <p style="margin-left: 3em">
      <input name="action" value="Login" type="submit"
             id="submit-login" />
      <input name="action" value="Logout" type="submit"
             id="submit-logout" />
    </p>
  </div>
  <input name="continue" type="hidden" value="http://192.168.200.15:3002/"/>
</form>

</body>
</html>

When i click login, it fails. Now if I change the http://localhost/_ah to http://192.168.200.15:3002/_ah everything works.

shakyShane commented 10 years ago

That's such strange behaviour.

The proxy is being rewritten/moved to it's own separate module so I can improve & tweak it outside of BrowserSync - hopefully it'll be easier to solve these remaining bugs

shakyShane commented 10 years ago

The BrowserSync proxy cannot account for every possible redirect/page in your site.

For a more consistent behaviour, you can try using the snippet instead.