Level 53
@sigelson what do you mean by it is not working?
Feb 24, 2020
6
Level 1
Javascript (Vue.js) not working in mobile and other connected devices but it is working on the desktop where the localhost is running.
Hi! 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.
<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)
}
}
})
</script>
Level 1
tried to look at my inspect and this is what i got.
"Failed to load resource: net::ERR_CONNECTION_REFUSED"
no errors when I'm running the project on localhost desktop but on other devices it is not working.
Level 53
@sigelson you have to be connected to the same network and you need to use a local IP (192.168.x.xxx by default) for accessing other device in the network. This might still not work if your router is not properly configured.
I recommend you to take a look at https://ngrok.com.
If you're using Laravel Valet, you just need to run valet share command in the root directory of the project and you will get a public URL which allows to access your local site.
Level 1
Hi @sti3bas I tried ngrok and tried accessing to ipaddress/ its still not working.
And Im having errors like this:
Access to XMLHttpRequest at 'http://localhost/dqrs/api/transactions' from origin 'http://192.168.254.126' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Level 53
@sigelson take a look at this package: https://github.com/fruitcake/laravel-cors
1 like
Level 1
wow @sti3bas Thanks! works like magic! But I still have problem though. I tried it on desktop and its working but in mobile devices ( only tried it on an android device), its still not functioning properly
Please or to participate in this conversation.