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没什么不同。