Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
devzero0 opened this issue Sep 3, 2018 · 5 comments
Closed

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

devzero0 opened this issue Sep 3, 2018 · 5 comments
Labels
discussion question Further information is requested

Comments

@devzero0
Copy link

devzero0 commented Sep 3, 2018

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
Copy link
Owner

gtalarico commented Sep 3, 2018

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.

image

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
Copy link
Author

devzero0 commented Sep 3, 2018

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?
screen shot 2018-09-03 at 5 19 29 pm
screen shot 2018-09-03 at 5 20 00 pm

@gtalarico
Copy link
Owner

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

image
image

@gtalarico gtalarico added the question Further information is requested label Sep 3, 2018
@devzero0
Copy link
Author

devzero0 commented Sep 3, 2018

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
Copy link
Owner

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
discussion question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants