Gatsby: Mixed content errors when using HTTPS option with dev server

[mcnichols]

the fix:
https://github.com/gatsbyjs/gatsby/blob/67615bf95cd802cc4a430ea6917892a87bebe7d4/packages/gatsby/cache-dir/app.js#L37-L39
should be

const parentSocket = io(
`${window.location.protocol}//${window.location.hostname}:${window.location.port}`
)

(it should use the protocol instead of only http://)

These sort of errors started happening for me when I used gatsby develop --host my.example.com --port 8443 --https
I'm not using Netlify; not a problem on their end.

bug introduced from
https://github.com/gatsbyjs/gatsby/pull/24335 (particularly https://github.com/gatsbyjs/gatsby/pull/24335/commits/a7f92af27526040ed15012ea50465f373606d8b5)

possibly related issues:
https://github.com/gatsbyjs/gatsby/issues/24864 (cors)
https://github.com/gatsbyjs/gatsby/issues/25570 (cors)
https://github.com/netlify/cli/issues/981 (netlify mixed content)

_Originally posted by @jonathanstanley in https://github.com/gatsbyjs/gatsby/issues/25695#issuecomment-687983024_

[mcnichols]

This issue was brought up in a closed issue by @jonathanstanley, I thought I deserved it's own separate issue.