我正在构建一个简单的登录网站,我的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状态,而我的后端永远无法连接