React项目使用Axios发GET/POST请求报net::ERR_NAME_NOT_RESOLVED错误如何解决

问题根因 #

你遇到的net::ERR_NAME_NOT_RESOLVED错误和Axios本身的基础配置无关，本质是域名解析范围不匹配：

你当前使用的请求URL是Kubernetes集群的内部域名（格式通常为<服务名>.<命名空间>.svc.cluster.local），这类域名仅能在K8s集群内部的Pod网络中，被集群内置的CoreDNS服务解析。而运行在集群外部的浏览器使用的是公网/本地DNS服务，根本无法识别这类内部域名，自然会抛出解析失败错误。

修复方案 #

你只需要把请求地址替换为集群外可访问的入口地址即可，可选方案如下：

• 方案1：直接使用外部可访问地址
  按你的K8s服务暴露方式替换请求域名：
  • 若使用NodePort类型Service，替换为集群节点公网IP:NodePort端口
  • 若使用LoadBalancer类型Service，替换为负载均衡的公网IP/绑定的公网域名
  • 若使用Ingress作为统一入口，替换为Ingress规则中配置的、已经完成公网DNS解析的业务域名
• 方案2：本地开发阶段配置代理转发
  本地调试时可以在Vite/Webpack的配置中添加本地代理，把前端请求的固定前缀（比如/api）转发到K8s的可访问地址，同时规避跨域问题，Vite配置示例如下：

// vite.config.ts 代理配置示例
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://你的K8s集群入口可访问地址',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

• 方案3：生产环境统一入口配置
  生产部署时建议将前端静态资源和后端接口都通过同一个Ingress域名暴露，用不同路径区分前后端服务，此时Axios请求直接使用相对路径（比如/api/xxx）即可，无需写死域名，从根源避免域名解析问题。

Axios可选配置 #

如果要统一管理请求前缀，你可以给Axios配置全局baseURL，根据环境自动切换地址，不需要额外做其他特殊配置：

// Axios实例全局配置示例
const request = axios.create({
  // 开发环境走本地代理，生产环境用公网域名
  baseURL: import.meta.env.PROD ? 'https://你的公网业务域名/api' : '/api',
  timeout: 10000
})

内容的提问来源于stack exchange，提问作者Laxmikant W.