Vue-cli: proxy problem

[qilvnuanqingyou]

Version

3.0.0-rc.3

Reproduction link

https://codesandbox.io/s/ppzz4pnj3x

Steps to reproduce

vue.config.js
proxy: {
'/': {
target: 'http://192.168.4.69:8080',
ws: true,
changeOrigin: true
}

What is expected?

no error, I also try this with vue-cli 2.9.6, It doesn't have this problem

What is actually happening?

I succeeded in getting the data, but the prompt was wrong:
Proxy error: Could not proxy request /sockjs-node/802/ehlkoad1/websocket from localhost:4200 to http://192.168.4.69:8080.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNRESET).

---

Can't I set the '/' ?

[LinusBorg]

I think the problem is that your configuration forwards webpack's HMR websocket request /sockjs-node through the proxy to your backend, which is not what you really want.

Right now I'm not too sure how to configure the proxy to skip on that url though.

[sijakret]

I am struggling with this as well.

For me the devServer section seems to be completely ignored:

with the config below i can print it with vue inspect devServer, so it ends up in the webpack config correctly, but the proxying is not working.
Seems to me like the devServer settings are taken from elsewhere, maybe via cli argument to webpack-dev-server.

Is the following supposed to work?

module.exports = {
  configureWebpack: {
    devServer: {
      proxy: {
        "/route": {
          target: "http://localhost:3002",
        }
      }
    }
  }
}

[LinusBorg]

Please have another look at the config documentation - there's an extra option for devServer, which you should use instead of configWebpack

[qilvnuanqingyou]

@sijakret if your vue-cli is 3.0 version, you should set the proxy in vue.config.js like this:

module.exports = {
    devServer: {
      proxy: {
        "/route": {
          target: "http://localhost:3002",
        }
      }
    }
  }

[LinusBorg]

I'm closing this since OPs problem seems to be resolved.

[scccboom]

@qilvnuanqingyou I also met the same problem, how to solve it?

[nickdex]

I was facing similar problem. My api server was hosted on http://localhost:3000/ and Vue app on http://localhost:8080, and my Config devServer: { proxy: 'http://localhost:3000' }. When I tried to resolve api call eg GET http://localhost:8080/clients I would get ECONNRESET error.

My solution (found it accidentally) was to add catch all in my vue router mappings, I hope this helps someone else too.

mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'login',
      component: Login
    },
    {
      path: '/home',
      name: 'home',
      component: Home
    },
// Adding this solved my problem
    {
      path: '*',
      component: Login
    }
  ]

[getElementBy1d]

I also encountered this problem. Has it been solved?

[samuraichickenfish]

I don't see how this has been solved, I have this issue as well after upgrading from the old templates. It used to be that the HMR ws conn would not be proxied, the only thing I can think to do as a hacky fix would be to prepend some string to the front of all of my api routes and that is not an acceptable solution. Please give more feedback.

[and54]

it is not solved

[rotelando]

I am encountering this issue also. Been trying to find a solution for some days now. Got it to work but after a day or two, it stopped working. Any one with a solution should please help.

[focussing]

It is not solved for sure!
This is very frustrating.
Sometimes it works, sometimes it does not.
Sometimes when I npm run serve another project and then stop it and go back to the original project it does work, sometimes this does not help either.
Cannot reproduce the error at all, it is a lucky shot whether I am able to help my customers!

node v8.16.2
vue cli 3.11.0
mac os mojave vs 10.14.6

[focussing]

https://techformist.com/vuejs-proxy-error-for-backend-connection/

also tried this one; sometimes it works, sometimes it doesn't...
Sorry I found nothing that reproduces, but maybe a bell might ring somewhere?

[ajslater]

127.0.0.1 works for me with a devProxy whereas 'localhost' does not. Could be a resolving issue native to macOS, haven't tested on other platforms.

[zhangxiaoshang]

同样碰到过几次类似问题
可以从以下几个方面尝试解决

• 检查proxy配置的是否正确
• dns是否能正常解析，有可能因网络问题不能正常解析，可以手动配置hosts
• 有可能是proxy设置的不够严谨

举个例子

'/data/':
   { target: 'https://data.domain.com',
     changeOrigin: true,
     pathRewrite: { '/data/': '/' } },
/live/':
   { target: 'https://domain.live',
     changeOrigin: true,
     pathRewrite: { '/live/': '/' } } }

当发起一个Get http://localhost:8080/live/1/data/rate.json
期望代理到 https://domain.live/1/data/rate.json

实际上 这个请求路径中还有一个 /data/ 会被第一个配置匹配到 所以就会出现问题
解决方案是将配置写的尽量严谨，比如改为：

'^/data/':
   { target: 'https://data.domain.com',
     changeOrigin: true,
     pathRewrite: { '^/data/': '/' } },
^/live/':
   { target: 'https://domain.live',
     changeOrigin: true,
     pathRewrite: { '^/live/': '/' } } }

[maleta]

I run into this problem. I am using WSL and everything worked nicely for more than a year, but now I get this error whenever I do update on backend(proxy) and do not restart client app as well.

UPDATE: It seems that this is not related to vue, but rather to node itself. After restart it takes a while to start server although it shows in console that server is up and running. Node version: 12.16.1