serveOrigin issues with webpack-dev-server

[nklayman]

When loading an index.html that loads other scripts, they fail to load with the above error message.

Repro/instructions here: https://github.com/nklayman/carlo-serveOrigin-blocked

Env:

• OS and version: Ubuntu 18.10
• Node version: 10.13.0
• npm version: 6.4.1
• yarn version: 1.12.3
• carlo version: 0.9.20 (latest at time of writing)

[pavelfeldman]

Instead of

  if (isDevelopment) {
    app.serveOrigin(process.env.WEBPACK_DEV_SERVER_URL);
  } else {
    app.serveFolder(__dirname);
  }

do

  app.serveFolder(__dirname);
  if (isDevelopment)
    app.serveOrigin(process.env.WEBPACK_DEV_SERVER_URL);

This is not the first report on this issue that I get, so I might need to use Env for debug instead of serveOrigin one...

[pavelfeldman]

Ah, wait, 0.9.20 already allows for serveOrigin to work on its own, with no serveFolder. This means your process.env.WEBPACK_DEV_SERVER_URL is empty.

[nklayman]

The issue is that a trailing / in the url makes it fail. Works: http://localhost:8080 Fails: http://localhost:8080/

[nklayman]

I found a new cause for the issue

• Loading from a webpack dev server fails
• If you load from a static server, hosted on the same url of the dev server, loading from the dev server now works
• If you delete .profile, loading from the webpack dev server fails

[vladimir-shilin]

I had the same problem net::ERR_BLOCKED_BY_CLIENT with both http://localhost and http://localhost/ origins. To fix I've added args: ['--allow-insecure-localhost'] to carlo.launch parameters.

[vladimir-shilin]

Sorry, just noticed that I also have changed origin to https://localhost.

[nklayman]

Still doesn't work for me, even with --allow-insecure-localhost and using https.

[vladimir-shilin]

Are the app opening in browser by url https://localhost:port? I've change serve command in package.json to vue-cli-service serve --mode development --host localhost --https. In my case hot reloading didn't work, so i just made js-redirect to https://localhost:port I'm not using vue-cli-plugin-carlo, so I don't know what carlo:serve doing. Maybe you need to run both serve and carlo:serve

[nklayman]

I got it to work, just had to delete .carlosysinfo. I still get some errors in the console (but the app works):

Thanks for your help!

[vladimir-shilin]

Got the same errors with local ip. --host localhost fixed it

[nklayman]

that fixed it, thanks.

[Janpot]

Had to run create-react-app with HTTPS=true to make this work

[BKcore]

While using HTTPS is a viable workaround, it is definitely not great.

@pavelfeldman Any idea why create-react-app's live reload server (webpack) with carlo's serveOrigin would fail to load js files with an net::ERR_BLOCKED_BY_CLIENT error? This works fine when opened directly in Chrome.

[msanchez-eutech]

I confirm that we need https to load webpack dev server, i tried with a setup from scratch and the following were enough:

• webpack-dev-server --https
• args: ['--allow-insecure-localhost'] -> Removes chrome warning about security
• app.serveOrigin('https://localhost:8080');

But as @BKcore I think it would be better to not have net::ERR_BLOCKED_BY_CLIENT error or an option to make it work without https

[atabel]

@BKcore, in case you're still interested, I've created a package to add simple carlo bindings to any create-react-app, it may work for you. https://github.com/atabel/carlo-cra

[tomachinz]

I'm trying to make an app that will fire up a web server for LAN users inside the firewall, so Id like to bind to 10.0.0.5. It starts up and I can visit https://127.0.0.1:4567/ in my local browser, but not https://10.0.0.5:4567/ perhaps that server is not designed to be shared though due to it's linkage to Node and the security profile being kinda wide open.

Upon closer inspection, it seems the data is going through some cleansing data pipes! Is this what is helping to firewall me from my un-clean desires to open up this security hole? eg screenshot.

Also - am I using webpack dev server or should I be to get around this? To achieve my goal of a more public web server end result. I suppose one should be aware of the risks.

app = await carlo.launch(
          {
            bgcolor: '#012345',
            title: 'AminoSee DNA Viewer',
            width: 1400,
            height: 600,
            channel: ['canary', 'stable'],
            icon: path.join(__dirname, 'public/512_icon.png'),
            args: process.env.DEV === 'true' ? ['--auto-open-devtools-for-tabs'] : [],
            userDataDir: path.join(__dirname, '.carlosysteminfo' ),
            localDataDir: path.join(__dirname, '/AminoSee_Output' ),
            serveOrigin('https://10.0.0.5:4567');
          });

Screenshot appears to show my web page being sent via this funky data-URL-encoding:

data:text/html,%0A <title>AminoSee%20DNA%20Viewer</title>%0A <style>html{background:%23012345;}</style>%0A <script>self.paramsForReuse = undefined;</script>

[m4heshd]

None of the above mentioned methods work. Still fails to load CSS and images.

[longjiahui]

after calling serveOrigin, browser get the right baseurl 'http://localhost:8080', but when loads assets (css, ico, etc) get the wrong baseurl '/'.