当我在 nuxt 应用程序中使用 axios 发出请求时，我得到：getaddrinfo ENOTFOUND backend.localhost

Question

我需要你的帮助，提前谢谢你！

我正在尝试通过 axios 调用 nuxt 应用中的 api 平台，但尝试在我的 nuxt 应用中使用 axios 发出 get 请求时出现 getaddrinfo ENOTFOUND backend.localhost 错误。

我的配置是：

• api平台通过symfony docker化并作为后端使用
• traefik 用作反向代理
• nuxt 未 dockerized并用作前端

这是我的 docker-compose 的样子：

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"

我的 nuxt.config.js：

...

axios: {
    baseURL: 'http://backend.localhost/api'
}

....

我可以通过浏览器通过http://backend.localhost/api 访问api UI，那里一切正常。

但是在我的 nuxt 应用程序代码中发出请求，会导致以下错误：

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]
}

这是我提出请求的方式：

async fetch() {
  ....
  await this.$axios.$get('/users')
  ...
}

Answer 1

我找到了问题的根本原因。

确实，我使用的是 Windows 10 家庭版。 那个windows版本需要安装window sub linux wsl + docker desktop才能使用docker。

因此，将 docker 与 wsl 一起使用会使我的 backend.localhost NOT FOUND 因为 docker 被隔离到 wsl 并通过它自己的 ipV4仅 与我的主机通信 您可以通过打开 wsl 终端并输入 ipconfig.exe 并在以太网 vEthernet (WSL) 中找到 ipV4 来找到它。

用该 ip 替换 backend.localhost 并将您的后端服务公开到端口 81 为 ipV4:81 => 一切正常。