Request fails on page reload in production - "getaddrinfo ENOTFOUND api.example.com"

[pratik149]

When I directly visit the page, or try to reload the page the axios fails to make the request and it gives the following error displayed in below image, but at the same time when I visit the page through nuxt-link then the axios successfully gets the data and renders it. What could be the issue? I'm trying the resolve this from last 3 days nothing worked for me. Please help.

// nuxt.config.js
publicRuntimeConfig: {
	apiBaseUrl: process.env.API_BASE_URL,
},

// plugins/axios.js
export default function (ctx) {
	// Set API's baseURL
	ctx.$axios.setBaseURL(ctx.$config.apiBaseUrl)

	// Enable the withCredentials option of axios globally
	ctx.$axios.defaults.withCredentials = true

	// Log all API request in console log when in development environment
	if (ctx.isDev) {
		ctx.$axios.onRequest((config) => {
			console.log('Making request to: ' + config.url)
		})
	}
}

Frontend - Nuxt SSR - hosted on www.example.com Backend - Express.js - hosted on api.example.com

Both are hosted on the same single AWS EC2 instance using Nginx and PM2.

I'm using Nuxt 2.15.5 and nuxtjs/axios 5.13.1

[pi0]

Hi @pratik149. Can you try to curl <baseURL> from your instance? And is there any isolation like Docker used? It seems like a DNS issue. (one workaround would be directly using ip:port for baseURL if possible)

[pratik149]

Can you try to curl from your instance? And is there any isolation like Docker used? It seems like a DNS issue.

Hi @pi0, thank you for the quick response. No there is nothing like Docker, just plain nuxt and express apps. I just tried making a curl request from the instance, and it says curl: (6) Could not resolve host: api.example.com. It does seems like a DNS issue now.

I will try your suggested workaround.

[farizrachmansyah]

Hi everyone I have this issue too. Have you solved this issue @pratik149? It would be appreciated if you could show me how to fix this issue. Thank you

[pratik149]

Hi everyone I have this issue too. Have you solved this issue @pratik149? It would be appreciated if you could show me how to fix this issue. Thank you

Hi @farizrachmansyah, it's been an year and I don't exactly remember what had caused this issue or how I had resolved it, but currently this is how my axios.js plugin looks like. I don't know whether this will help you or not, but this the best I could come up with for now. Hope it helps.

// plugins/axios.js

export default function (ctx) {
	// destructing all required 'ctx' object except 'route'
	const { $axios, redirect, isDev, error } = ctx
	// Note: we dont's destruct 'route' obj, because we must
	// use 'route' thru 'ctx.route' only, otherwise the route obj
	// will keep returning the initially set values, which hampers
	// the nuxt-link functionality.

	// Set API's baseURL
	const baseURL = process.env.API_BASE_URL
	$axios.setBaseURL(baseURL)

	// Enable the withCredentials option of axios globally
	$axios.defaults.withCredentials = true

	// Set custom header 'X-DEVICE-TYPE' to define device type
	const deviceType = ctx.app.$device.isMobile ? 'mobile' : 'desktop'
	$axios.setHeader('X-DEVICE-TYPE', deviceType)

	$axios.onRequest((config) => {
		config.headers = {
			// This is set so that API server does not return 302 redirect when server error
			// occurs, instead it tells the server to return error response in json format.
			'X-Requested-With': 'XMLHttpRequest',
		}
	})

	$axios.onResponse((response) => {
		// Do redirect depending on the axios response
		if (response.data.redirect) {
			return redirect(
				response.data.redirect_status_code,
				response.data.redirect_url_path,
				response.data.redirect_url_query
			)
		}
	})

	// Handle error pages
	$axios.onError((err) => {
		if (err.response && err.response.status === 404) {
			return error({ statusCode: 404, message: 'Page Not Found' })
		}
		if (err.response && err.response.status === 500) {
			return error({ statusCode: 500, message: 'Server Error' })
		}
	})

	// Log all API request in console log when in development environment
	if (isDev) {
		$axios.onRequest((config) => {
			console.info('Making API request to: ' + process.env.API_BASE_URL + config.url)
		})
	}
}

[farizrachmansyah]

Hi @pratik149, thank you for your fast response Based on that code, I don't see any proxy configuration, are you not using a proxy? I thought that issue occurred because of the proxy config. But previously I've tried not to use proxy configuration, then I got CORS error

[pratik149]

Yes @farizrachmansyah, you got it right, I didn't use any proxy. For handling CORS we had whitelisted the frontend domain name in the API Backend.

[ondiekisteven]

Hi @pi0 I have docker on my side and facing the same issue. when i curl from inside the container, i get curl: (6) Could not resolve host: examplehost.com but outside the docker container, curl command is successful. What could be the issue, or what can i do to fix it. Thanks

[ikuosaito1989]

I have the same problem. Do you have a solution?