I need your help and thank you in advance !
I am trying to make a call to the api platform in a nuxt app through axios but I got error of getaddrinfo ENOTFOUND backend.localhost when trying to make a get request with axios in my nuxt app.
My configuration is:
- api platform is dockerized through symfony and used as the backend
- traefik is used as reverse proxy
- nuxt is not dockerized and used as frontend
Here is how my docker-compose looks like:
version: "3.8"
services:
backend:
build:
context: ./
dockerfile: ./infra/docker/backend/Dockerfile.dev
user: "${PUID}:${PGID}"
restart: unless-stopped
environment:
DATABASE_CLIENT: ${DATABASE_CLIENT}
DATABASE_NAME: ${DATABASE_NAME}
DATABASE_HOST: ${DATABASE_HOST}
DATABASE_PORT: ${DATABASE_PORT}
DATABASE_USERNAME: ${DATABASE_USERNAME}
DATABASE_PASSWORD: ${DATABASE_PASSWORD}
expose:
- 80
depends_on:
- mysql
volumes:
- ./backend:/app:rw,cached
labels:
- "traefik.enable=true"
- "traefik.http.routers.backend.rule=Host(`backend.localhost`)"
- "traefik.http.routers.backend.entrypoints=web"
sysctls:
- net.ipv4.ip_unprivileged_port_start=0
portainer:
image: portainer/portainer
restart: unless-stopped
command: --no-auth -H unix:///var/run/docker.sock
expose:
- 9000
volumes:
- /var/run/docker.sock:/var/run/docker.sock
labels:
- "traefik.enable=true"
- "traefik.http.routers.portainer.rule=Host(`portainer.localhost`)"
- "traefik.http.routers.portainer.entrypoints=web"
traefik:
image: "traefik:v2.2.5"
command:
- "--log.level=DEBUG"
- "--api.insecure=true"
# Enabling docker provider
- "--providers.docker=true"
# Do not expose containers unless explicitly told so
- "--providers.docker.exposedbydefault=false"
- "--entrypoints.web.address=:80"
ports:
- "80:80"
- "8080:8080"
labels:
- "traefik.enable=true"
- "traefik.http.routers.traefik.entrypoints=web"
- "traefik.http.routers.traefik.rule=Host(`monitor.localhost`)"
- "traefik.http.services.traefik.loadbalancer.server.port=8080"
volumes:
- "/var/run/docker.sock:/var/run/docker.sock:ro"
My nuxt.config.js:
...
axios: {
baseURL: 'http://backend.localhost/api'
}
....
I can access through the browser to the api UI via http://backend.localhost/api and everything works well there.
But making a request in my nuxt app code, leads to the error below:
Error: getaddrinfo ENOTFOUND backend.localhost
at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:69:26) {
errno: -3008,
code: 'ENOTFOUND',
syscall: 'getaddrinfo',
hostname: 'backend.localhost',
config: {
url: '/users',
method: 'get',
headers: {
connection: 'keep-alive',
'cache-control': 'max-age=0',
'sec-ch-ua': '"Chromium";v="94", "Google Chrome";v="94", ";Not A Brand";v="99"',
'sec-ch-ua-mobile': '?0',
'sec-ch-ua-platform': '"Windows"',
'upgrade-insecure-requests': '1',
'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36',
'sec-fetch-site': 'same-origin',
'sec-fetch-mode': 'navigate',
'sec-fetch-dest': 'document',
referer: 'http://localhost:3000/',
'accept-encoding': 'gzip, deflate',
'accept-language': 'en-GB,en;q=0.9,fr-FR;q=0.8,fr;q=0.7,en-US;q=0.6',
cookie: 'phpMyAdmin=46260be5bb513da7351adb73a0f4af8e; io=7IL9SV9Qq5sBDsGzAAAD; pmaAuth-1=%7B%22iv%22%3A%22yjzw8rQARGbpPBqg6BiNlQ%3D%3D%22%2C%22mac%22%3A%2213692b36a201adb505c7ce76926414461029f705%22%2C%22payload%22%3A%22oYBIB7LMEU96C4T5X6RxgQ%3D%3D%22%7D; i18n_redirected=fr',
'if-none-match': '"46616-dbF9UDJNzxIn7dMVplznpaaPF6s"',
Accept: 'application/json, text/plain, */*'
},
baseURL: 'http://backend.localhost/api',
transformRequest: [ [Function: transformRequest] ],
transformResponse: [ [Function: transformResponse] ],
timeout: 0,
adapter: [Function: httpAdapter],
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName: 'X-XSRF-TOKEN',
maxContentLength: -1,
maxBodyLength: -1,
validateStatus: [Function: validateStatus],
transitional: {
silentJSONParsing: true,
forcedJSONParsing: true,
clarifyTimeoutError: false
},
data: undefined
},
request: <ref *1> Writable {
_writableState: WritableState {
objectMode: false,
highWaterMark: 16384,
finalCalled: false,
needDrain: false,
ending: false,
ended: false,
finished: false,
destroyed: false,
decodeStrings: true,
defaultEncoding: 'utf8',
length: 0,
writing: false,
corked: 0,
sync: true,
bufferProcessing: false,
onwrite: [Function: bound onwrite],
writecb: null,
writelen: 0,
afterWriteTickInfo: null,
buffered: [],
bufferedIndex: 0,
allBuffers: true,
allNoop: true,
pendingcb: 0,
constructed: true,
prefinished: false,
errorEmitted: false,
emitClose: true,
autoDestroy: true,
errored: null,
closed: false,
closeEmitted: false,
[Symbol(kOnFinished)]: []
},
_events: [Object: null prototype] {
response: [Function: handleResponse],
error: [Function: handleRequestError]
},
_eventsCount: 2,
_maxListeners: undefined,
_options: {
maxRedirects: 21,
maxBodyLength: 10485760,
protocol: 'http:',
path: '/api/users',
method: 'GET',
headers: [Object],
agent: undefined,
agents: [Object],
auth: undefined,
hostname: 'backend.localhost',
port: null,
nativeProtocols: [Object],
pathname: '/api/users'
},
_ended: true,
_ending: true,
_redirectCount: 0,
_redirects: [],
_requestBodyLength: 0,
_requestBodyBuffers: [],
_onNativeResponse: [Function (anonymous)],
_currentRequest: ClientRequest {
_events: [Object: null prototype],
_eventsCount: 7,
_maxListeners: undefined,
outputData: [],
outputSize: 0,
writable: true,
destroyed: false,
_last: true,
chunkedEncoding: false,
shouldKeepAlive: true,
_defaultKeepAlive: true,
useChunkedEncodingByDefault: false,
sendDate: false,
_removedConnection: false,
_removedContLen: false,
_removedTE: false,
_contentLength: 0,
_hasBody: true,
_trailer: '',
finished: true,
_headerSent: true,
_closed: false,
socket: [Socket],
_header: 'GET /api/users HTTP/1.1\r\n' +
'connection: keep-alive\r\n' +
'cache-control: max-age=0\r\n' +
'sec-ch-ua: "Chromium";v="94", "Google Chrome";v="94", ";Not A Brand";v="99"\r\n' +
'sec-ch-ua-mobile: ?0\r\n' +
'sec-ch-ua-platform: "Windows"\r\n' +
'upgrade-insecure-requests: 1\r\n' +
'user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36\r\n' +
'sec-fetch-site: same-origin\r\n' +
'sec-fetch-mode: navigate\r\n' +
'sec-fetch-dest: document\r\n' +
'referer: http://localhost:3000/\r\n' +
'accept-encoding: gzip, deflate\r\n' +
'accept-language: en-GB,en;q=0.9,fr-FR;q=0.8,fr;q=0.7,en-US;q=0.6\r\n' +
'cookie: phpMyAdmin=46260be5bb513da7351adb73a0f4af8e; io=7IL9SV9Qq5sBDsGzAAAD; pmaAuth-1=%7B%22iv%22%3A%22yjzw8rQARGbpPBqg6BiNlQ%3D%3D%22%2C%22mac%22%3A%2213692b36a201adb505c7ce76926414461029f705%22%2C%22payload%22%3A%22oYBIB7LMEU96C4T5X6RxgQ%3D%3D%22%7D; i18n_redirected=fr\r\n' +
'if-none-match: "46616-dbF9UDJNzxIn7dMVplznpaaPF6s"\r\n' +
'Accept: application/json, text/plain, */*\r\n' +
'Host: backend.localhost\r\n' +
'\r\n',
_keepAliveTimeout: 0,
_onPendingData: [Object],
agent: [Agent],
socketPath: undefined,
method: 'GET',
maxHeaderSize: undefined,
insecureHTTPParser: undefined,
path: '/api/users',
_ended: false,
res: null,
aborted: false,
timeoutCb: null,
upgradeOrConnect: false,
parser: null,
maxHeadersCount: null,
reusedSocket: false,
host: 'backend.localhost',
protocol: 'http:',
_redirectable: [Circular *1],
[Symbol(kCapture)]: false,
[Symbol(kNeedDrain)]: false,
[Symbol(corked)]: 0,
[Symbol(kOutHeaders)]: [Object: null prototype]
},
_currentUrl: 'http://backend.localhost/api/users',
[Symbol(kCapture)]: false
},
response: undefined,
isAxiosError: true,
toJSON: [Function: toJSON]
}
Here is the way I made the request:
async fetch() {
....
await this.$axios.$get('/users')
...
}
