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

Errors in browser console when proxying '/' #2662

Open
CK159 opened this issue Sep 30, 2018 · 1 comment

Comments

@CK159
Copy link

commented Sep 30, 2018

Version

3.0.4

Reproduction link

https://github.com/CK159/vue-proxy-issue

Node and OS info

node 8.12.0 npm 6.4.1

Steps to reproduce

Create project vue create my-app

Add vue.config.js with this content

module.exports = {
	baseUrl: "vue-app/dist/",
	devServer: {
		proxy: {
			"/": {
				target: "http://localhost:80",
			}
		}
	}
};

npm run serve

  1. Navigate to http://localhost:8080/vue-app/dist/
  2. Navigate to http://localhost:8080/anywhere-else
  3. Navigate back to http://localhost:8080/vue-app/dist/ and reload the page

What is expected?

No errors shown in console in steps 1 and 3.

What is actually happening?

At step 3, web page's console is continuously filled with

The connection to ws://192.168.1.98:8080/sockjs-node/020/oi45qllu/websocket was interrupted while the page was loading.


This issue seems to happen after the first proxy request is made then it remains until restarting the dev server.

Hot Module Replacement seems to remain working despite the error messages.

I think this configuration should 'just work' all the time or there should be some documentation which explains how to achieve equivalent functionality.

What I'm ultimately trying to achieve is to have all the Vue assets, bundles HMR in a self-contained sub folder served by the dev server running on port 8080 while everything else is proxyed to the backend server running on port 80. The idea being that someone working on the vue part of the site can set up vue-cli and the dev server and get all the awesome benefits whereas other developers can just work with the backend server directly without needing 'all that javascript stuff'.

@johnfraney

This comment has been minimized.

Copy link
Contributor

commented Apr 5, 2019

This isn't a perfect workaround, but because my API server doesn't use websockets, I was able to stop those errors by disabling websockets in the proxy:

module.exports = {
  devServer: {
    proxy: {
      '/': {
        target: 'http://localhost:8000',
        ws: false,
      }
    }
  },
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.