Kubernetes docker 容器中的前端 Vue.js 应用程序无法连接到后端

Question

我构建了一个前端 Vue.js 应用程序，在 kubernetes 环境下的 docker 容器上运行。后端也在同一个 kubernetes 集群中（我在该项目中使用 Minikube）。net::ERR_NAME_NOT_RESOLVED运行时连接后端容器时 出错：

在容器内部，使用curl连接到后端没有问题：

$ kubectl exec -it deployment/hpl-browser-deployment -- sh
/ # curl http://hpl-manager-service:2354
{
  "message": "Manager status", 
  "state": "IDLE"
}

我用于axiosapi 服务：

import axios from 'axios';

export default class APIService {
  API_URL = '';

  constructor(apiAddress) {
    this.API_URL = apiAddress;
  }

  async get() {
    console.log('ApiService: get()');
    try {
      const response = await axios.get(this.API_URL);
      console.log(`ApiService: get result: ${response.data}`);
      return response.data;
    } catch (error) {
      console.error(error);
      return error;
    }
  }

  async postPlainText(data) {
    console.log(`ApiService: post() - data: ${data}`);
    try {
      const response = await axios.post(this.API_URL,
        data,
        {
          headers: {
            'Content-Type': 'text/plain',
            Accept: '*/*',
          },
        });
      console.log(`ApiService: post result: ${response.data}`);
      return response.data;
    } catch (error) {
      console.error(error);
      return error;
    }
  }
}

当我端口转发后端服务并连接到http://localhost:2354.

我想知道什么可能会导致这个问题？

Answer 1

您的前端 vue.js 应用程序仅托管在容器中。该应用程序实际上是从客户端的浏览器运行的。作为 API 的后端也需要可供客户端的浏览器访问。前端和后端的通信不经过前端的容器，而是直接从客户端到后端。

\n

在这种情况下，不使用/不需要前端容器和后端容器之间的连接，因为在响应客户端之前，您没有从前端容器渲染任何内容。如果您使用的是服务器端渲染技术，例如 PHP、Django、.net、Nodejs 等，您需要连接到后端来获取一些数据并渲染一些内容，然后再回复客户端，那么之间的连接前端容器和后端容器是相关的。

\n

您当前的设置与在 CDN 上托管应用程序/代码并访问单独服务（公开可用）上托管的 API 没有什么不同。

\n