Javascript (Vue. js) не работает на мобильных и других подключенных устройствах, но работает на рабочем столе, где работает localhost

Question

Я попытался запустить свой проект laravel на локальном хосте, затем попытался подключить его к другим мобильным устройствам и настольным компьютерам / ноутбукам через адрес локального хоста. Когда я попытался запустить функцию на рабочем столе, на котором размещен локальный хост, она работает, но на других устройствах она не работает. Вот мой код для 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 как baseUrl для своего HTTP-клиента (скорее всего, axios в вашем дело). Прочитайте его значение из вашего .env файла. Наконец, когда вы обслуживаете приложение, укажите IP-адрес вашего устройства в качестве хоста, используя опцию --host.

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