docker - 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"
}

我使用 axios 作为 api 服务:

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 的后端也需要能够被客户端的浏览器访问。前后端之间的通信不经过前端的容器，而是直接从客户端到后端。

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

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