Javascript (Vue.js) 无法在移动设备和其他连接的设备中运行，但它可以在运行 localhost 的桌面上运行

Posted 2023-02-22

【中文标题】Javascript (Vue.js) 无法在移动设备和其他连接的设备中运行，但它可以在运行 localhost 的桌面上运行

【英文标题】：Javascript (Vue.js) not working in mobile and other connected devices but it is working on the desktop where the localhost is running

【发布时间】：2020-06-08 02:42:25

【问题描述】：

我尝试在 localhost 上运行我的 laravel 项目，然后尝试通过 localhost 地址将其连接到其他移动设备和台式机/笔记本电脑上。当我尝试在托管 localhost 的桌面上运行该功能时，它可以正常工作，但在其他设备上却无法正常工作。这是我的 javascript 代码。

我试图查看我的检查，这就是我得到的。

“加载资源失败：net::ERR_CONNECTION_REFUSED”

这是我的脚本不工作：

<script>
const app = new Vue(
    el:'main',
    data:
        dropdown: [],
        selected: null,
        trans:

    ,
    mounted()
        this.getTrans();

    ,
    methods:
        getTrans()
            axios.get('http://localhost/dqrs/api/transactions')
            .then((response)=>
                this.trans=response.data
            )

            .catch(function (error)
                console.log(error);
            );
        ,
        setDropdown: function (type) 
                    this.selected = null;
                    this.dropdown = this.trans[type];
                    console.log(type)
                    

    
)

【问题讨论】：

在您的移动设备上@9​​87654324@ 上不会运行任何服务器，您需要运行服务器的机器的 IP/域。

【参考方案1】：

您似乎正在尝试使用 localhost 访问网站资源，这将在您尝试运行代码的设备上运行。但是，当您尝试从联网设备访问它时，它将无法正常工作。

确保您没有将 localhost 硬编码为 HTTP 客户端的 baseUrl（在您的情况下很可能是 axios）。从您的.env 文件中读取它的值。最后，在为应用程序提供服务时，使用 --host 选项将设备的 IP 地址指定为主机。

php artisan serve --host=<your-device-IP>

【讨论】：

嗨！我已经使用 Laravel-CORS 修复了它，但我的问题是它仍然无法在移动设备上运行。 javascipt 函数不工作。

就像我在回答中所说的那样，axios.get('http://localhost/dqrs/api/transactions') 将不起作用。您必须将localhost 替换为您设备的IP 地址。如果您已经这样做了但仍然遇到问题，则可能是防火墙阻止了访问。

你是最棒的家伙！我怎么会错过这个逻辑。非常感谢！