Level 75
@tarang19 On localhost propably you need to run on http not https
http://localhost:8000/user/all
May 10, 2020
14
Level 4
axios Request failed with status code null in native js
I am try to do communicate my vue nativescript application with Laravel(backend) using axios but when i try it will give me an error (Request failed with status code null)
my Axios query in nativescript App
onItemTap(){
let self = this;
axios
.get('https://localhost:8000/user/all', {
timeout: 5000
})
.then(res => {
self.listOfItems = res.data
console.log(self.listOfItems)
})
.catch(err => console.error(err));
}
},
and my laravel controller
public function index(Request $request)
{
$active_user = User::all();
return $active_user;
}
All projects are runing on different ip network please help to solve my issue
Level 4
Checked but still null
Level 75
And could you post your routes?
Level 4
not use routes
my code
<template>
<Page>
<ActionBar title="Welcome to NativeScript-Vue!"/>
<ListView for="item in listOfItems" @itemTap="onItemTap">
<v-template>
<!-- Shows the list item label in the default color and style. -->
<Label>{{ item.title }}</Label>
</v-template>
</ListView>
</Page>
</template>
<script >
import axios from 'axios';
export default {
data() {
return {
msg: 'Hello World',
listOfItems:null,
}
},
mounted(){
this.onItemTap()
},
methods:{
onItemTap(){
let self = this;
axios
.get('http://localhost:8000/user/all', {
timeout: 5000
})
.then(res => {
self.listOfItems = res.data
console.log(self.listOfItems)
})
.catch(err => console.error(err));
}
},
}
</script>
<style scoped>
ActionBar {
background-color: #53ba82;
color: #ffffff;
}
.message {
vertical-align: center;
text-align: center;
font-size: 20;
color: #333333;
}
</style>
Level 15
Your laravel routes? For the route you are trying to hit?
Level 4
Route::get('user/all','UserController@index');
Level 4
Route::get('user/all','UserController@index');
Level 15
What gets returned in your network tab?
Level 4
http://127.0.0.1:8000/user/all
[{"id":1,"name":"Sinhgad Data Center","email":"[email protected]","avatar":"https:\/\/lh5.googleusercontent.com\/-J4UWflUadho\/AAAAAAAAAAI\/AAAAAAAAAAA\/AAKWJJN3ewKGIOmS1bVJc3SZLWhSyNvCMA\/photo.jpg"},{"id":2,"name":"tarang shah","email":"[email protected]","avatar":"https:\/\/lh3.googleusercontent.com\/a-\/AOh14GjJZ-HrxLjwjoFBZIGQuVMZrQ7LqUOV8s-nryHGTw"},
{"id":3,"name":"Tarang Shah","email":"[email protected]","avatar":"https:\/\/lh5.googleusercontent.com\/-6GkwxPfSZio\/AAAAAAAAAAI\/AAAAAAAAAAA\/AAKWJJPP4mW_7W_8iq2BUxC522TR_q3Lxg\/photo.jpg"},
{"id":4,"name":"sdc bakup","email":"[email protected]","avatar":"https:\/\/lh4.googleusercontent.com\/-9GQFjHgIFms\/AAAAAAAAAAI\/AAAAAAAAAAA\/AAKWJJMd-EgXicetxpV4Gv-v6fa6-OFWBA\/photo.jpg"},
{"id":5,"name":"tarang shah","email":"[email protected]","avatar":"https:\/\/lh3.googleusercontent.com\/-rUE5FqWm4z4\/AAAAAAAAAAI\/AAAAAAAAAAA\/AAKWJJMSydKxCwKIYXszos9v1tiPA5w7Uw\/photo.jpg"}]
Level 15
Is that the response from the axios call? If it is, it looks to be ok
Level 4
its from json call not from axios
Level 4
is necessary get records from passport Api or we can get directly from laravel project
Level 15
If your vue application is a separate project, then ideally you need to go via the api and use passport to protect the routes.
Level 4
do you have any link or working demo so i can see or any tutorial ?
Please or to participate in this conversation.