Error occurred while trying to proxy request / from localhost:4000 to http://localhost:3000

[dum3ng]

Today I play around with nuxt.js and loopback, and start a simple api server using loopback and use that in nuxt.js.

But when I call the api using proxy devserver config, an error occurred: Error occurred while trying to proxy request / from localhost:4000 to http://localhost:3000 .

First the error seemed confusing, because I just config proxy like usual. But after some googling, found out that the loopback is actually running on ipv6,

Server is running at http://[::1]:3000                    
Try http://[::1]:3000/ping

and the reason behind the error is the client dev server proxy request to ipv4.

So just change this in nuxt.config.ts:

  proxy: {
    '/api/fire': {
      target: 'http://[::1]:3000',
      changeOrigin: true,
      pathRewrite: {
        '^/api/fire': '',
      },
    },
  },

https://github.com/saikat/react-apollo-starter-kit/issues/20#issuecomment-316651403