http://localhost:8080/sockjs-node errors

[devzero0]

First off, thanks for the great template. The browser console reports errors trying to connect to http://localhost:8080/sockjs-node/..., because the dev server isn't listening on localhost but instead the host IP. How do you change the development server to listen on localhost as well? I tried setting "host:'localhost'" in vue.config.js but it is ignored. Alternately, how do you point those sockjs-node calls to the hostname rather than localhost?

[gtalarico]

I usually only get the socket error when the devserver is not running or has tripped on an exception, so I am not sure I fully understand the issue.

Here is the setup I use: python manage.py runserver Serves django on default: 127.0.0.1:8000 yarn serve serves webpack dev server on default localhost:8080

Vue backend calls go to /api/*, and dev server proxies that to localhost:8000. since localhost usually == 127.0.0.1 Django is able to answer those requests. See below.

If this setup doesn't work for you, you can try adding host up (127.0.0.1) to your dev server config instead:

Dev Server config

    devServer: {
      proxy: {
        '/api*': {
          // Forward frontend dev server request for /api to django dev server
          // target: 'http://localhost:8000/',  // This one works as wel since 127.0.0.1 == localhost for me.
          target: 'http://127.0.0.1:8000/',  // <- django's default
        }
      }
    }

For consistency's sake, maybe we can change settings to have all on the same host (I kept the default ones to reduce modifications to default settings).

We could serve Django on localhost by using python manage.py runserver localhost:8000 or change the webpack config to serve on 127.0.0.1

Does this answer your question?

[devzero0]

Thanks for the quick and detailed response. I do have Django listening on 0.0.0.0:8000, but the queries for sockjs-node are going against localhost:8080 and for some reason the webpack dev server isn't listening on localhost. Included are screenshots of "yarn serve" and from the Chrome console showing the failing requests (zaphod is my workstation name). Can you suggest the configuration change to make my "yarn serve" look like yours?

[gtalarico]

You can modify your package.json to select a specific hostname or port. https://cli.vuejs.org/guide/cli-service.html#vue-cli-service-serve

[devzero0]

Was just typing up this response when I saw yours come in. Thanks again for your help.

---

Looks like I got it working. I added "-- host 0.0.0.0" to the line in package.json that specifies the "serve" script and now it it is listening on both localhost and my host's IP. I also had to add "disableHostCheck: true" to the devServer vue.config.js to resolve "Invalid Host header" errors.

[gtalarico]

disableHostCheck: true not sure I would do this for production, but for dev should be ok, although I have not needed with the setup I described above. Anyhow, glad you got it working!