Kubernetes环境下NuxtJS通过Axios调用内部Service不通如何解决

你的推测完全正确：NuxtJS 运行时的 Axios 请求分为两种场景：服务端渲染阶段发起的请求运行在 K8s 集群内的 Nuxt 容器中，可以直接解析内部 Service 域名；用户浏览器加载完页面后触发的客户端请求运行在用户本地设备上，无法访问 K8s 集群内部的私有域名地址。

以下是两种可以满足你「后端服务不对外暴露」需求的解决方案：

方案一：使用 Nuxt 内置代理转发（最适配当前场景） #

不需要修改现有 K8s 配置，仅需要调整 Nuxt 配置即可实现，所有客户端请求通过前端服务中转到内部后端接口：

1. 若未安装代理依赖，先安装 @nuxtjs/proxy
2. 修改 nuxt.config.js 配置如下：

export default {
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  axios: {
    proxy: true,
    // 服务端发起的请求直接使用集群内部地址
    baseURL: process.env.API_URL
  },
  proxy: {
    // 客户端发起的带 /api 前缀的请求，会由Nuxt服务端转发到后端内部服务
    '/api': {
      target: process.env.API_URL,
      pathRewrite: { '^/api': '' }
    }
  }
}

3. 前端业务代码中的接口请求统一使用 /api 前缀即可，例如原请求 http://mhov-api-service:4000/list 调整为 /api/list。

额外说明：页面首屏渲染的数据请求如果放在 asyncData 或 fetch 钩子中执行，默认就是服务端发起，可以直接使用内部 Service 域名，无需走代理规则。

方案二：部署 Ingress 作为集群统一入口 #

你可以部署 Nginx Ingress 作为整个应用的唯一公网入口，配置路由规则分发流量：

• 访问根路径 /* 的流量转发到前端 Service mhov-ipp-service
• 访问 /api/* 的流量转发到后端 Service mhov-api-service

该方案下前后端服务都可以保持 ClusterIP 类型不对外单独暴露，所有流量统一走 Ingress 入口管控。

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