infinite XHR calls from sockjs-node when using HTTPS

Is this a bug report?

Yes it is.

Did you try recovering your dependencies?

Yes I did

npm --version : 5.4.0 yarn --version 1.3.2

Which terms did you search for in User Guide?

I have searched for ‘HTTPS’ and ‘sockjs-node’ in the docs.

Environment

node -v : v9.4.0 npm -v : 5.6.0 yarn --version: 1.3.2 I have ejected, webpack version is 3.8.1

OS : macOS High Sierra 10.13.2 browser : latest chrome or firefox

Steps to Reproduce

for now on, I’ve been using the dev server with HTTPS on (thanks to the explanations in the doc), with success. However, I have recently upgraded CRA. Please note that I have ejected, so every once in a while I just scafold a new cra app, and merge the differences in my projet, I have done it twice so fare with success, this is the third time. I haven’t noted the previous cra version I’ve used, but from package.json I can see I’ve been from webpack 2.6.1 to 3.8.1

Now, I have no problems when HTTPS if false, but when HTTPS is true, my app is getting into an infinite loop of XHR requests coming from sockjs-node.

Of course, I’ve tested a freshly generated CRA app with HTTPS, and it works fine. However, after copy/pasting my project inside, and installing all new packages using yarn. I run into this issue…

While I don’t understand what triggers this problem, I have a feeling that the infinite loop comes from the live reload feature in webpackDevServer.config.js. So of course, this problem won’t happened when serving a production version of the app behing a SSL cert.

Expected Behavior

when developing using HTTPS with my application, there shouldn’t be any infinite loops caused by the dev server.

Actual Behavior

Here is a GIF of the infinite XHR request

and the headers from one call

the preview

I am also always getting this message in the console

The development server has disconnected. Refresh the page if necessary.

and sometimes, I get this error in the console

htmlfile?c=_jp.amifsnd:8 Uncaught DOMException: Blocked a frame with origin "https://localhost:3000" from accessing a cross-origin frame. at https://localhost:3000/sockjs-node/723/dnduswa3/htmlfile?c=_jp.amifsnd:8:20

Reproducible Demo

I haven’t been able to point out myself where the problem lies, so I don’t want to copy paste you a huge project with lots of dependencies as it will be a waste of time for you.

However if this kind of issue rings a bell, or if you can point me in the right direction… I would appreciate it a lot!

[kyriacos]

@Timer I’m also experiencing the same issue and i haven’t ejected. I looked at the linked issue. Based on what i saw it’s not something that accessible in a config. You mentioned moving away from webpack-dev-server. Is that part of the upcoming release?

Thanks

[jhchill666]

Linking ticket from webpack-dev-server:

https://github.com/webpack/webpack-dev-server/issues/1021#issuecomment-331080184