Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I’m struggling to find out what’s wrong actually, and there is no clue yet, I have a simple endpoint that responds with a simple json array
// api.php
Route::get('me', function (Request $request) {
return response()->json([
'user' => [
'name' => 'someone'
]
]);
});
It’s just that simple due to I’m actually building my first native mobile app with nativescript-vue, I tested it out with postman, it works
I tested axios to fetch dummy data from jsonplaceholder
mounted() {
axios.get('https://jsonplaceholder.typicode.com/posts').then(res => console.log(res.data))
},
// output in console
/*
[ { userId: 1,
JS: id: 1,
JS: title: 'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
JS: body: 'quia et suscipit
JS: suscipit recusandae consequuntur expedita et cum
JS: reprehenderit molestiae ut ut quas totam
JS: nostrum rerum est autem sunt rem eveniet architecto' },
JS: { userId: 1,
JS: id: 2,
JS: title: 'qui est esse',
JS: body: 'est rerum tempore vitae
JS: sequi sint nihil reprehenderit dolor beatae ea dolores neque
JS: fugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis
JS: qui aperiam non debitis possimus qui neque nisi nulla' },
JS: { userId: 1,
JS: id: 3,
JS: title: 'ea molestias quasi exercitationem repellat qui ipsa sit aut',
JS: body: 'et iusto sed quo iure
JS: voluptatem occaecati omnis eligendi aut ad
JS: voluptatem doloribus vel accusantium quis pariatur
JS: molestiae porro eius odio et labore et velit aut' },
JS: { userId: 1,
JS: id: 4,
JS: title: 'eum et est occaecati',
JS: body: 'ullam et saepe reiciendis voluptatem adipisci
JS: sit amet autem assumenda provident rerum culpa
JS: quis hic commod...
*/
Similarly if I just try to hit the Laravel endpoint, here is what’s returned.
mounted() {
axios.get('http://127.0.0.1:8000/api/me').then(res => console.log(res))
},
/*
: { data: '',
JS: status: null,
JS: statusText: '',
JS: headers: {},
JS: config:
JS: { adapter: { [Function: xhrAdapter] [length]: 1, [name]: 'xhrAdapter', [prototype]: [Object] },
JS: transformRequest: { '0': [Object] },
JS: transformResponse: { '0': [Object] },
JS: timeout: 0,
JS: xsrfCookieName: 'XSRF-TOKEN',
JS: xsrfHeaderName: 'X-XSRF-TOKEN',
JS: maxContentLength: -1,
JS: validateStatus: { [Function: validateStatus] [length]: 1, [name]: 'validateStatus', [prototype]: [Object] },
JS: headers: { Accept: 'application/json, text/plain, */*' },
JS: method: 'get',
JS: url: 'http://127.0.0.1:8000/api/me',
JS: data: undefined },
JS: request:
JS: { UNSENT: 0,
JS: OPENED: 1,
JS: HEADERS_RECEIVED: 2,
JS: LOADING: 3,
JS: DONE: 4,
JS: _responseType: '',
JS: textTypes:
JS: [ 'text/plain',
JS: 'application/xml',
JS: 'application/rss+xml',
JS: 'text/html',
JS: 'text/xml',
JS: [length]: 5 ],
JS: _listeners: {},
JS: _readyState: 4,
JS: _options:
JS: { url: 'http://127.0.0.1:8000/api/me',
JS: ...
*/
Any solution?, I’m running out of solutions, I’ve seen on stack overflow, that’s a Laravel issue and as mentioned there that I should downgrade it, but it didn’t work out either
Add a catch to your axios call to see if it's throwing any errors:
mounted() {
axios.get(url)
.then({data} => console.log(data))
.catch({response} => console.log(response)); // add this to see if the console is spitting an error.
}
@KYLEMILLOY - I tried that , it doesn't throw an error, it still consoles the response normally.
What version of Laravel and axios are you using? I'll try to recreate at home.
"axios": "^0.18.0"
and Laravel 5.7, I also tried 5.6 and 5.5, didn't work
Instead of hitting http://127.0.0.1:8000/api/me can you just hit /api/me instead?
I was doing on the start as I've set the baseURL to the localhost, but didn't work as well.
I just turned off the artisan serve, then tried to do the same axios call, and it gives me the same response I mentioned earlier, any clue what or why is that happening ?
I just did a fresh install of laravel and used the example-component provided in the bootstrapper and it works as intended when I add in the route. Are you using a fresh install? Have you added any middleware to the kernel at all?
Let's try to track this down another way...if you go into the network tab in your browser do you see the call being made? If we investigate the response from there is it also null? What status code does it show?
well Laravel application is my endpoints, and I'm calling them through nativescript-vue through a mobile application, not the Laravel application itself, just I'm pretty sure right now that the Ajax request doesn't go to the endpoint or localhost, because I turned off the Laravel server and it still gives the same console I mentioned
Hmmmmmmm....I'm thinking if you're calling from a mobile application then the 127.0.0.1 url is likely a reference to itself (the mobile device) and not your server that you're running. Is the device and your computer both attached to wifi? Try getting your LAN IP from your router (example: 192.168.0.123) and use that instead of 127.0.0.1:8000
axios.get('http://192.168.0.123:8000/api/me')
Thoughts?
They are both attached to the same wifi, I'm running a phone emulator on the laptop , I don't know if that causes problem or not
I think the issue is that your nativescript can't reach your application because it's a different app. I've solved this before using valet and running valet share and then using the ngrok IP address for the URL in nativescript.
Give that a try...
[update] Use the URL provided by ngrok not the IP address.
I just tried that, but remains the same error :/
@DRFRAKER - It works now, I had to use the ngrok link itself not the valet shared link, thanks I really appreciate your help ^^
Can you please elaborate? I am very new to nativescript vue and have this problem.
I updated my Axios version to 0.19.0. problem solved
If you are using Android 9 or later add android:usesCleartextTraffic="true" on application tag in the AndroidManifest.xml (source).
Please or to participate in this conversation.