Nuxt.js socket hang up on axios get only on https not http server

Question

I'm using Nuxt 2.8.1, Axios Module (https://axios.nuxtjs.org).

I followed up this guide https://nuxtjs.org/faq/http-proxy/ to solve CORS problems on Firefox/IE, but ended up NuxtServerError: socket hang up on every proxied request if I ENABLE server https option in nuxt.config.js, not if I disable.

I tried adding rejectUnauthorized: false to server https param, wrote an express server to handle the SSL certificate and render using Nuxt,... but still can't solve the problem.

This is my nuxt.config.js:

  env: {
    API_HOST: 'https://api.mywebsite.com',
    BASE_URL: process.env.BASE_URL || 'http://localhost:3000',
  },
  axios: {
    proxy: true,
  },
  proxy: {
    '/api/': {
      target: 'https://api.mywebsite.com/api',
      pathRewrite: {'/api': ''},
      credentials: false,
    }
  },
  server: {
    port: 3000,
    https: {
      rejectUnauthorized: false,
      key: fs.readFileSync('../privkey.pem'),
      cert: fs.readFileSync('../fullchain.pem')
    }
  }

It works well if i just remove whole https param in 'server'. Here is my axios call on store/index.js:

export const actions = {
    async nuxtServerInit ( { commit } ) {
        const { data } = await this.$axios.get('/api/option');

        let options = {};

        data.forEach(item => {
            options[item.Name] = item.Value;
        });

        commit('setOptions', options)
    },
}

This is my console log on that axios call:

Promise {                                                                                                                                                                                                       18:04:38
  <rejected> [Error: socket hang up] {
      at createHangUpError (_http_client.js:323:15)
      at Socket.socketOnEnd (_http_client.js:426:23)
      at Socket.emit (events.js:203:15)
      at Socket.EventEmitter.emit (domain.js:448:20)
      at endReadableNT (_stream_readable.js:1129:12)
      at process._tickCallback (internal/process/next_tick.js:63:19)
    code: 'ECONNRESET',
    config: {
      url: 'http://localhost:3000/api/option',
      method: 'get',
      headers: [Object],
      baseURL: 'http://localhost:3000/',
      transformRequest: [Array],
      transformResponse: [Array],
      timeout: 0,
      adapter: [Function: httpAdapter],
      xsrfCookieName: 'XSRF-TOKEN',
      xsrfHeaderName: 'X-XSRF-TOKEN',
      maxContentLength: -1,
      validateStatus: [Function: validateStatus],
      data: undefined
    },
    request: Writable {
      _writableState: [WritableState],
      writable: true,
      domain: null,
      _events: [Object],
      _eventsCount: 2,
      _maxListeners: undefined,
      _options: [Object],
      _redirectCount: 0,
      _redirects: [],
      _requestBodyLength: 0,
      _requestBodyBuffers: [],
      _onNativeResponse: [Function],
      _currentRequest: [ClientRequest],
      _currentUrl: 'http://localhost:3000/api/option'
    },
    response: undefined,
    isAxiosError: true,
    toJSON: [Function]
  }
}

I would appreciate any help :)

Answer 1

I tried to use as many options as I thought was relevant in the proxy module, but ended up nowhere. I think you should create an issue on either @nuxtjs/proxy or on http-proxy-middleware github.

On my end the proxy route works without a problem with Vue's normal lifecycles, but will end up with a socket hang up when placed in asyncData or fetch - so I assume it's a SSR issue.

I don't have any problems with CORS, so I ended up creating module clones of the axios-module with custom prototypes. This setup unfortunately doesn't work alongside the axios-module as that also creates a socket hangup regardless of whether I have a proxy setup.

Answer 2

https://stackoverflow.com/a/43439886/1989083

I fixed my same issue by adding these lines into axios.js:

delete process.env['http_proxy'];
delete process.env['HTTP_PROXY'];
delete process.env['https_proxy'];
delete process.env['HTTPS_PROXY'];