Question

我正在构建一个具有登录名的简单网站，我的vue-frontend需要从连接到sql数据库的nodejs-backend检索用户数据。我决定为此使用docker-compose，据我了解，docker-compose会自动为docker-compose.yml中提到的服务建立网络。

似乎无效的是我在代码中寻址后端的方式。我怀疑这可能是因为我使用axios将请求发送到后端的方式。

我已经检查了默认的docker-network，并能够使用在网络配置中找到的dns名称从前端ping到后端。但是在我的代码中使用相同的名称无效。

有效的方法是将主机端口映射到我暴露的api端口并使用http://localhost:5000作为地址，但这违反了docker网络的目的。

我的docker-compose.yml：

version: '3.3'

services:
    vue-frontend:
        image: flowmotion/vue-js-frontend
        ports:
            - 8070:80
        depends_on:
            - db-user-api

    db-user-api:
        image: flowmotion/user-db-api
        environment:
            - PORT=5000
        ports:
            - 5000:5000 #only needed if docker network connection can't be established

有问题的Vue-fontend文件：

Login.vue

methods: {
    async login() {
      try {
        const response = await authenticationService.login({
          email: this.email,
          password: this.password
        });
        this.$store.dispatch("setToken", response.data.token);
        this.$store.dispatch("setUser", response.data.user);
        this.$router.push({ path: "/" });
      } catch (error) {
        this.showError = true;
        this.error = error.response.data.error;
      }
    }
  }
};
</script>

authenticationService.js

import api from "@/services/api";

export default {
  login(credentials) {
    return api().post("login", credentials);
  }
};

api.js

import axios from 'axios';
import config from '../config/config';
export default () => {
    return axios.create({
        baseURL: config.userBackendServer
    });
};

config.js（）

module.exports = {
    userBackendServer: 'http://cl-dashboard_db-user-api_1:5000' //this doesn't seem to work
};

//using 'http://localhost:5000' works if ports are mapped to host machine.

预期结果将是我的后端执行sql查找。

actuel结果是，前端没有连接到我的后端，而是给了我404状态，并且后端从未到达

Answer 1

您是正确的假设docker网络中的容器可以相互通信而无需打开任何通往外部世界的端口。

point is- 您的vue应用程序不在任何容器中，它是作为一个js脚本文件从容器中提供给您的浏览器的，这是将请求发送到您的节点后端的容器。由于您的浏览器无论如何都不在docker网络内部-您必须使用外部端口映射（在您的情况下为localhost:5000）才能访问后端。

如果您还有其他疑问，请告诉我。

当前端和后端在虚拟docker网络中时，如何使用axios解决后端主机

1 个答案: