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

Question

我尝试在 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)
                    }

    }
})

Answer 1

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

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

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