Possible issue when proxying vue-cli http behind an https proxy.

[BinarySpike]

Version

5.0.0-beta.3

Reproduction link

https://github.com/BinarySpike/vue-cli-issue-https-proxy

Environment info

>vue info

Environment Info:

  System:
    OS: Windows 10 10.0.17763
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
  Binaries:
    Node: 14.16.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.12 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Not Found
  npmGlobalPackages:
    @vue/cli: Not Found

>yarn global list
yarn global v1.22.10
info "@vue/[email protected]" has binaries:
   - vue
Done in 0.63s.

Steps to reproduce

Configure an https proxy to vue-cli-service serve.

What is expected?

Mixed mode error or properly functioning development environment.

What is actually happening?

App.js will load over https and automatically upgrade the vue-cli-service serve endpoint to https (while it's running http). This causes a net::ERR_SSL_PROTOCOL_ERROR error.

---

The reproduction repository contains a working example of the issue using node, vue-cli, express, and http-proxy-middleware.

I'm working on developing a Vue module for the Microsoft.AspNetCore.SpaServices.Extensions module. The default AspNetCore MVC template uses HTTPS by default. When I proxy the /App.js bundle from vue-cli-service serve, somehow the webpack endpoint is being upgraded to https:

/******/ 	__webpack_require__.O(undefined, ["chunk-vendors"], function() { return __webpack_require__("./node_modules/webpack-dev-server/client/index.js?https://192.168.1.101:49256&sockPath=/sockjs-node"); })

Edit* The above is no longer happening...

However, the server is running on HTTP. When I load the app.js file directly—e.g. http://192.168.1.101:49256—The page is loads appropriately.

Also, when I enable HTTPS with vue-cli-service serve --https, everything works, but the developer has to navigate to a vue-cli-service serve endpoint and accept the locally signed certificate. While this will mostly persists across sessions, it doesn't provide a seamless environment on initial setup—I also have first-hand observation that this is a harder issue to troubleshoot and workaround—making more problems than it solves.

Here are some considerations:

• Enabling https->http proxying might come with a mixed mode issue.
• I may be able to pass the developer certificate from aspnet/visual studio to vue-cli and have it serve that—I can't yet think of a way to do it stateless i.e. without writing to disk.
• Proxy everything — While that should theoretically work, as the proxy even supports websocket proxying, currently the proxy is setup specifically for angular/react—and this is reflected in the code comments and commits. This adds dependencies & maintenance that is not desired.
• Disable https on dev environments. — This doesn't match the default template and requires extra steps for the end-user developer to setup their launch parameters, similar to the https->https issue with untrusted local certs.
• Produce an HTTP 302 redirect instead of proxy the app.js

Any input on how I could solve this in a high quality way is appreciated. However, my next plan is to fake-fix the https promotion and see if I get mixed mode issues. Additionally, I'm going to test 302 Redirect instead of a proxy.

[BinarySpike]

The app.js bundle is no longer showing the https entry point and I'm not sure why. Both my ASPNet project and my nodejs reproduction. The https promotion is still happening but it may be happening at the sockjs/webpack layer and not vue-cli.

[BinarySpike]

Success! The proper work-around is to use --host 127.0.0.1. This was the PR in webpack-dev-server that allows it: webpack/webpack-dev-server#2303