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

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'];