Vue.js Web 应用程序 axios 从客户端运行而不是后端

Question

我是这个有趣的编程世界的新手，如果我的问题太新，很抱歉。

我有一个 Vue.js 应用程序在由 xampp 安装的 apache 上的 Linux Red Hat 服务器中运行，在同一服务器中，我的 asp.net-core 6 Web api 应用程序正在监听 http://localhost:5256 和 https //localhost:7296 和 mysql 数据库。

我的 Web 应用程序出现的问题是，当我将我的 Web 应用程序作为来自不同服务器的客户端使用时，axios 似乎会在我自己的笔记本电脑上搜索 Web api，而不是在本地主机后端 Linux 服务器中搜索，即使我将vue.js 项目中 linux 服务器的 IP，我的笔记本电脑无法访问该服务器，只能访问 vue.js 应用程序。

有人可以帮我看看发生了什么吗，这是我的 vue.js 项目中的 axios 代码：

   sendDataToAPI(date, id) {
        const url = 'http://localhost:5256/api/job';
        axios({
            method: 'get',
            url: url,
            params: {
                date: date,
                id: id
            }
            })
        .then(response => {
        // Process the API response
        this.jobs = response.data;
        //console.log(response.data);
        })
        .catch(error => {
        // Handle any errors
        console.error('Error:', error.message);
        });
    }

此外，变量“this.jobs”用于在同一个vue.js项目中构建一个表，但是当我的vue项目启动此方法时，axios从我的客户端、我的电脑、手机、平板电脑发送get请求等等。我希望 axios 使用来自 linux 本地主机的 Web api。所有方法都在同一个 mywebapp.vue 中运行，我是否必须将这些方法拆分到单独的 module.js 中？此外，Web api 在端口中响应我，在同一 Linux 服务器和有权访问 IP 地址的服务器中的curl 没有任何问题。

有人可以解释一下发生了什么事吗？或者如果我做错了什么？

我希望我的 axios 请求是向我的 Linux 服务器的后端发出的，而不是在客户端。

Answer 1

当您使用 '

http://localhost:5256/api/job

' 作为 URL 时，Axios 会尝试将请求发送到运行 JS 模块的设备的

localhost

。在您的情况下，由于您正在从已从 XAMPP 应用程序加载 JS 模块的不同设备访问您的应用程序，因此它会尝试连接到该设备本身上的 Web API。相对路径（

localhost

）将是使用包含 Axios 的 JS 模块的机器。在这种情况下，它是您的浏览器

要解决此问题，您应该将

'http://localhost:5256/api/job'

替换为托管 ASP.NET Core API 的 Linux 服务器的 IP 地址或主机名。

PS：分步骤说明发生的情况：

1. 您正在调用您的网站前端应用程序
2. 它为您提供包含所有 js 依赖项、css 样式、静态文件等的响应。
3. 您现在在本地也拥有包含 axios 调用的代码部分。正在您的浏览器中运行。
4. 您正在调用相对路径“

   localhost

   ”，因此您从浏览器调用本地客户端计算机而不是服务器计算机。

这就是为什么当您在服务器上时它可以工作，因为服务器上的

localhost

也是您的后端。但是您的客户端计算机上的

localhost

对服务器的后端一无所知。