当前端和后端在虚拟 docker 网络中时，如何使用 axios 寻址后端主机 [英] How to address backend host with axios, when frontend and backend are in virtual docker network
问题描述
我正在构建一个带有登录名的简单网站，我的 vue 前端需要从连接到 sql 数据库的 nodejs 后端检索用户数据.我决定为此使用 docker-compose，据我了解，docker-compose 会自动为我的 docker-compose.yml 中提到的服务设置网络.
I'm building a simple Website with login, and my vue-frontend needs to retrieve user data from my nodejs-backend which connects to a sql database. I decided to use docker-compose for this, and as I understand, docker-compose sets up a network automatically for the services that are mentioned in my docker-compose.yml.
似乎不起作用的是我在代码中处理后端的方式.我怀疑可能是因为我使用 axios 向后端发送请求的方式.
What doesn't seem to work, is the way I address the backend in my code. I suspect that it might be because of the way I use axios to send a request to my backend.
我已经检查了默认的 docker-network，并且能够使用我在网络配置中找到的 dns 名称从我的前端 ping 到我的后端.但是在我的代码中使用相同的名称不起作用.
I have inspected the default docker-network and was able to ping from my frontend to my backend using the dns names I found in the network-configuration. But using the same names inside my code didn't work.
有效的是将主机端口映射到我公开的 api 端口并使用 http://localhost:5000 作为地址，但这违背了 docker 网络的目的.
What does work, is mapping a host port to my exposed api port and using http://localhost:5000 as address, but this defeats the purpose of a docker network.
我的 docker-compose.yml:
my 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 文件:
the Vue-fontend files in question:
登录.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
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()
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 查找.
expected result would be my backend doing a sql lookup.
实际结果是，我的前端没有连接到我的后端，而是给了我 404 状态，而我的后端从未到达
actuel result is, instead of connecting to my backend my frontend gives me a 404 status and my backend is never reached
推荐答案
您正确地假设 docker 网络中的容器可以相互通信，而无需向外界开放任何端口.
you are correct assuming containers in the docker network can talk to each other without opening any ports to the outer world.
重点是 - 你的 vue 应用程序不在任何容器中 - 它从容器中作为 js 脚本文件提供给你的浏览器，这是将请求发送到你的节点后端的那个.因为您的浏览器无论如何都不在 docker 网络内 - 您必须使用外部端口映射(在您的情况下为 localhost:5000)才能到达后端.
point is- your vue app is not in any container- it is served from a container as a js script file to your browser, which is the one sending the requests to your node backend. since your browser is by any means not inside the docker network - you must use the outer port mapping (localhost:5000 in your case) to reach the backend.
如果您对此有任何疑问，请告诉我.
let me know if you have any more questions about that.
这篇关于当前端和后端在虚拟 docker 网络中时，如何使用 axios 寻址后端主机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
