使用axios进行内部API调用

时间:2020-07-24 09:15:21

标签: node.js api vue.js axios frontend

我有两个节点实例,分别在Express后端与MongoDB在端口5000上,而Frontend在VueJs在端口8080上。

我的目标是直接从前端服务器进行API调用,以使用户无法访问数据库。

目前,我具有可以在localhost上完美运行的配置,但不会白白访问任何其他计算机。

Home.vue上使用的组件:

import AxiosModule from "@/middleware/axiosmodule.js";
(...)
 methods:{
        /* eslint-disable no-console */
        fetchData(){
            AxiosModule
                .get("/data")
                .then(response => {
                    this.values = response.data;
                    console.log(response.data);
                })
                .catch(err => {
                    console.log(err);
                });
        },

AxiosModule:

import axios from 'axios';

export default axios.create({
    baseURL: "http://localhost:5000/api/",
    headers:{
        "Content-type": "application/json",
    },
});

在localhost:5000 / api / data处有一个对象数组。

从本地网络访问:8080时,控制台中显示有关连接到:5000 / api / data的“ ERR_CONNECTION_REFUSED”消息,我认为这表明对API的实际调用来自客户端,而不是服务器(I我的路由器上只有8080端口开放。

因此,据我了解,我有两种选择:内部进行API调用并阻止对端口5000的访问或实施some sort of authorization

当然,如果您有更好的方法,请告诉我。谢谢。

0 个答案:

没有答案