🐛 BUG: pages dev with https cannot proxy request (to https server)

What version of Wrangler are you using?

2.1.6

What operating system are you using?

MacOS

Describe the Bug

I’m unable to proxy to vite when using --local-protocol https step to reproduce:

npm create vite@latest my-vue-app -- --template vue-ts
cd my-vue-app
npm i -D wrangler
npx wrangler pages dev --local-protocol https -- npx vite --https

in vite.config.ts add:

  server:{  https: {
    key: fs.readFileSync('./localhost.internal.tld.key'),
    cert: fs.readFileSync('./localhostinternal.tld.pem')
  }}

or with an automatic self signed certificate (with @vitejs/plugin-basic-ssl plugin):

import mkcert from '@vitejs/plugin-basic-ssl'
………
 plugins: [ 
       mkcert(),vue() ],
 server: { https: true },

Open https://127.0.0.1:8788 On console:

🚧 'wrangler pages <command>' is a beta command. Please report any issues to https://github.com/cloudflare/wrangler2/issues/new/choose
Running npx vite...
Sleeping 5 seconds to allow proxy process to start before attempting to automatically determine port...
To skip, specify the proxy port with --proxy.
[proxy]: 
  VITE v3.1.3  ready in 354 ms


[proxy]:   ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose

Automatically determined the proxy port to be 5173.
No functions. Shimming...
▲ [WARNING] Passing --inspect is unnecessary, now you can always connect to devtools.


╭────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ [b] open a browser, [d] open Devtools, [c] clear console, [x] to exit                                                                                                                                          │
╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
Starting inspector on 0.0.0.0:9229 failed: address already in use
[pages:wrn] Service bindings are experimental. There may be breaking changes in the future.
[pages:inf] Generating new self-signed certificate...
[pages:inf] Updated `Request.cf` object cache!
[pages:inf] Worker reloaded! (322B)
[pages:inf] Listening on 0.0.0.0:8788
[pages:inf] - https://127.0.0.1:8788
[pages:inf] - https://192.168.2.42:8788
[pages:err] Error: Could not proxy request: TypeError: fetch failed
    at file:///Users/--/my-vue-app/node_modules/wrangler/miniflare-dist/index.mjs:5995:27
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at Fetcher.fetch (/Users/--/my-vue-app/node_modules/@miniflare/core/src/plugins/bindings.ts:130:17)
    at Object.fetch (/Users/--/my-vue-app/node_modules/wrangler/templates/pages-shim.ts:6:20)
    at EventTarget.[kDispatchFetch] (/Users/--/my-vue-app/node_modules/@miniflare/core/src/standards/event.ts:385:13)
    at Server.<anonymous> (/Users/--/my-vue-app/node_modules/@miniflare/http-server/src/index.ts:298:20)
GET / 502 Bad Gateway (70.85ms)

On browser: [wrangler] Could not proxy request: TypeError: fetch failed

I tried to configure vite to listen to a https port with the same resule

[eltorio]

I found a workaround I produced a certificate with:

            X509v3 Subject Alternative Name: 
                DNS:localhost.internal.tld, DNS:localhost., IP:127.0.0.1

signed by our subca internal.tld certificate I added an environment variable in my VsCode environment

"NODE_EXTRA_CA_CERTS":"${workspaceFolder}/subca.internal.tld.pem",

And finally it works !

So for using --local-protocol https to https server you must have a valid signed certificate witch it does not make sense. I think the Agent of undici.fetch must include

Agent({ connect: { rejectUnauthorized: false } })

[eltorio]

Still same with 2.2.1

I updated my test repo for using my (worst/ugly/…) workaround. only once issue:

npm run create-cert

next use as usual:

npm run dev
#or
npm run build && npm run preview

package.json

{
  "name": "my-vue-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "create-ca":"openssl req -x509 -sha256 -days 3562 -nodes -newkey rsa:4096 -subj '/CN=demo.highcanly.club/C=FR/L=Flers-en-Escrebieux' -keyout localhost-rootCA.key -out localhost-rootCA.pem",
    "create-key":"openssl genrsa 4096 > localhost.key",
    "create-csr":"openssl req -new -key localhost.key -subj '/CN=localhost/C=FR/L=Flers-en-Escrebieux'  > localhost.csr",
    "create-crt":"openssl x509 -req -in localhost.csr -out localhost.pem -sha256 -CA localhost-rootCA.pem -days 3600 -CAkey localhost-rootCA.key -CAcreateserial -CAserial localhost-rootCA.srl",
    "create-cert":"npm run create-ca && npm run create-key && npm run create-csr && npm run create-crt",
    "dev": "NODE_EXTRA_CA_CERTS=`pwd`/localhost-rootCA.pem npx wrangler pages dev --local-protocol https -- npx vite",
    "build": "vite build",
    "preview": "NODE_EXTRA_CA_CERTS=`pwd`/localhost-rootCA.pem npx wrangler pages dev --local-protocol https -- npx vite preview"
  },
  "dependencies": {
    "vue": "^3.2.45"
  },
  "devDependencies": {
    "@vitejs/plugin-basic-ssl": "^0.1.2",
    "@vitejs/plugin-vue": "^3.2.0",
    "plugin": "^0.3.3",
    "typescript": "^4.8.4",
    "vite": "^3.2.3",
    "vue-tsc": "^1.0.9",
    "wrangler": "^2.2.1"
  }
}