VueJS has been my ‘go to’ front-end development framework for the last two quarters. I use VueJS with Laravel, FeathersJS and AdonisJS, and cannot just stop loving the development cycle.

While you are developing the backend and frontend on same machine, and, if you fly solo - you end up using the same development machine for all purposes.

Let’s say -

1. The backend with AdonisJS is at http://localhost:3333
2. Front-end Vue is served hot at http://localhost:8080

Vue application will talk to back-end Adonis through API calls. This is accomplished through a utility like Axios.

1
2
3
4
5
6
7

    // baseURL = http://localhost
    const https = axios.create({ baseURL: baseURL,
                    headers: {Authorization: `Bearer ${store.state.authentication.token}`},
                    timeOut: 5000
                });
    const.post("v0/auth/register", { email: email,password: password });

You create a ‘vue.config.js’ file -

1
2
3
4
5
6
7
8
9

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:3333",
      },
    },
  },
};

All API requests are proxied from port 8080 to 3333 on same machine, and everyone is happy. This formula just works(tm), and I have seldom bothered to see more in this regard. It is almost automatic to copy/paste files and expect everything to fall into place.

However, I started seeing unexpected errors in one of the recent development cycles.

Proxy error: Could not proxy request /api/v0/auth/register from localhost:8080 to http://localhost:3333/.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNRESET).

Invoke any API, and the results are consistent. Of course, this has nothing to do with Vue or back-end server.

With the genius meter set to ‘high’, I tried deleting configuration file, use IP instead of hostname, use a different project altogether, use ‘fetch’, restart servers, and the development box. The end result just won’t change.

So, I dumbed down.. I just shutdown firewall (& antivirus - though that is not required). Everything came back online.

The problem went away for some time and came back to haunt later. There seemed to be no pattern on when the problem starts and goes away.

After some more digging I did the following change in the ‘vue.config.js’ file as per some suggestions on a completely different topic. I used 127.0.0.1 instead of localhost.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

 devServer: {
    proxy: {
      "/api": {
        target: "http://127.0.0.1:3333",
        timeout: 6000,
        secure: false,
        changeOrigin: true
      }
    }
  }

It is not clear why this problem started - probably a result of a Windows update. But, it was a frustrating week for sure. I don’t see proxy error anymore on my main development machine - will report back if that changes in a while.