Nuxt应用使用Axios请求Docker部署后端报getaddrinfo ENOTFOUND错误

根因说明 #

该错误产生的核心原因是Nuxt的fetch钩子在服务端渲染（SSR）阶段会在Node.js环境执行请求，Node.js的DNS解析规则和浏览器不同，无法自动识别backend.localhost指向本地127.0.0.1；而浏览器可以正常解析这个自定义本地域名，所以你直接访问http://backend.localhost/api的API UI是正常的。

解决方案 #

以下两种方案均可解决问题，第二种无需修改系统配置，更推荐使用：

方案1：修改本地hosts文件 #

在本机hosts配置中添加域名映射，让Node.js可以正常解析backend.localhost：

127.0.0.1 backend.localhost

不同系统的hosts文件路径：

• Windows系统：C:\Windows\System32\drivers\etc\hosts
• Mac/Linux系统：/etc/hosts
  修改保存后刷新系统DNS缓存，再重启Nuxt服务即可生效。

方案2：Axios分环境配置请求前缀 #

直接在nuxt.config.js中根据代码执行环境配置不同的baseURL，跳过域名解析步骤：

axios: {
  // 服务端执行时直接走127.0.0.1访问Traefik，客户端保持原域名走反向代理
  baseURL: process.server ? 'http://127.0.0.1/api' : 'http://backend.localhost/api'
}

修改后重启Nuxt服务即可正常发起请求。

验证 #

配置完成后重新触发接口请求，即可正常获取接口返回数据。如果选择方案1，可先在终端执行ping backend.localhost确认域名解析是否正常，解析返回127.0.0.1即为配置成功。

内容的提问来源于stack exchange，提问作者user17169843