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

问题描述

我已经构建了一个前端Vue.js应用程序，该应用程序在kubernetes环境下的docker容器上运行.后端也位于同一kubernetes集群中(我在项目中使用的是Minikube).运行时，连接到后端容器时出现错误net::ERR_NAME_NOT_RESOLVED:

I have built a front-end Vue.js application, running on a docker container under kubernetes environment. the backend is also in the same kubernetes cluster (I am using Minikube for the project). When running it gets error net::ERR_NAME_NOT_RESOLVED when connecting to back-end containers:

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

while inside the container, there is no problem connect to the back-end using 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时，应用程序在开发环境上运行没有问题.

The application has no problem running on development environment, when I port-forward the back-end service, and connect to http://localhost:2354.

我想知道什么可能导致此问题?

I would like to know what may cause this problem?

推荐答案

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

Your front-end vue.js application is just hosted in the container. The application is actually run from the browser of the client. Your backend which functions as the API will also need to be accessible to the browser of the client. The communication between frontend and backend doesn’t go through the container of the frontend, but directly from the client to the backend.

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

The connection between the front-end container and backend container is not used/needed in this case since you're not rendering anything from the front-end container, before responding to the client. If you were using a server-side rendering technology, such as PHP, Django, .net, Nodejs, etc., whereby you needed to connect to the backend to get some data and render something before replying to the client, then the connection between the front-end container and the backend container would be relevant.

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

Your current setup is no different from hosting your application/code on a CDN and accessing the API hosted on a separate service(publicly available).

这篇关于Kubernetes Docker容器中的前端Vue.js应用无法连接到后端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！