当前端和后端在虚拟docker网络中时，如何使用axios解决后端主机 [英] How to address backend host with axios, when frontend and backend are in virtual docker network
问题描述
我正在构建一个具有登录名的简单网站，我的vue-frontend需要从连接到sql数据库的nodejs-backend中检索用户数据.我决定为此使用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:
Login.vue
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
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.
actuel结果是，前端没有连接到我的后端，而是给了我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.
point is- 您的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屋！
