php – Javascript (Vue.js) not working in mobile and other connected devices but it is working on the desktop where the localhost is running-ThrowExceptions

Exception or error:

I tried running my laravel project on localhost then I tried connecting it on another mobile devices and desktops/laptops via the localhost address. When I tried to run the function on the desktop that has been hosting the localhost, it is working, but in other devices, it is not working. Here is my code for javascript.

I tried to look at my inspect and this is what i got.

“Failed to load resource: net::ERR_CONNECTION_REFUSED”

enter image description here

This is my script that is not working:

<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)
                    }

    }
})

How to solve:

It looks like you are trying to access the website resources using localhost which would work on the device you are trying to run the code from. But it will not work when you try to access it from a networked device.

Make sure you haven’t hard coded localhost as the baseUrl for your HTTP client (most likely axios in your case). Read its value from your .env file. Lastly, when you are serving the application, specify your device’s IP address as the host using the --host option.

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

Leave a Reply

Your email address will not be published. Required fields are marked *