我正在构建一个简单的登录网站,我的vue前端需要从连接到sql数据库的nodejs后端检索用户数据.

似乎不起作用的是我在代码中处理后端的方式.

我已经判断了默认的docker网络,并且能够使用在网络配置中找到的dns名称从前端ping到后端.

有效的方法是将一个主机端口映射到我公开的api端口,并使用http://localhost:5000作为地址,但这违背了docker网络的目的.

我的docker .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文件:

登录.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>

认证服务.js

import api from "@/services/api";

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

应用程序编程接口.js

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

配置.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状态,而我的后端永远无法连接

推荐答案

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

点是-your vue app is not in any container- it is served from a container as a js script file to your browser,这是一个发送请求到您的 node 后端.由于您的浏览器无论如何都不在docker网络内,因此必须使用外部端口映射(在您的情况下为localhost:5000)来到达后端.

如果你还有其他问题,请告诉我.

Vue.js相关问答推荐

Vuejs 通过数据键迭代复杂对象

仅在构建时为 Vue3 和 TailwindCSS 添加前缀

使用计算(computed)属性更改视图

Nuxt3-Vue中的useRoute和useRouter有什么区别

如何根据生产或开发模式读取不同的 .env 文件?

Nuxt & Vuetify:如何控制 CSS 文件的加载顺序?

Django Rest 框架、CSRF 和 Vue.js

事件 click点击的无效处理程序:未定义

ionic - `slot` 属性已被弃用 - eslint-plugin-vue

在组件外使用 VueI18n 的问题

Vue.js 无法切换字体真棒图标

Laravel 中的 VueJS 组件实现中的鼠标悬停

Vuejs模板继承

在加载数据之前触发mounted方法 - VueJS

Vuejs 3 从子组件向父组件发出事件

如何在生产模式下为 chrome 扩展启用 Vue devtools?

vue-cli-service build --target lib 导入为 lib 时丢失图像路径

我应该将所有数据存储在 vuex 状态

如何从 Vuex 操作访问 Vuex 状态属性?

mount() 仅在组件 Vue.js 上运行一次