Error encountered when making axios call from Nativescript-Vue to local Laravel API [Status code null in failed request]

I am a newcomer to Nativescript, and in my current project, I am attempting to send an http request to my locally hosted Laravel server using php artisan serve on . I am utilizing a physical android device for testing rather than an emulator. After doing some research, I found my local IPv4 address using the ipconfig command.

Within my App.vue component, I trigger a GET request to my Laravel API endpoint with axios:

This code snippet does not produce the desired result:

console.log('Initiating axios call');
axios.get('http://192.168.1.35:8000/api/posts')
.then((response) => {
    console.log('Request successful! /////////////////////////////////////////');
}).catch((err)=>{
    console.log('Error occurred',err);
});

Unfortunately, I constantly receive this error message:

'Error occurred' [Error: Request failed with status code null]

In my Laravel backend, this is the controller method that corresponds to /api/posts:

public function list(Request $request)
    {
        $posts = Post::with(['postcategory','author'])
            ->latest()
            ->paginate($request->input('paginate', 10));

        return response()->json([
            'data' => $posts,
            'pagination' => [
                'total' => $posts->total(),
                'per_page' =>$posts->perPage(),
                'current_page' => $posts->currentPage(),
                'last_page' => $posts->lastPage(),
                'from' => $posts->firstItem(),
                'to' => $posts->lastItem()
            ]  
        ]);
    }

When I tested it with the httpbin endpoint, I received a response successfully, but my Laravel API remains unresponsive...

On the other hand, this code snippet works as expected:

axios.get('https://httpbin.org/get')
.then((response) => {
   console.log('Success');
   console.log(response.data);
}).catch((err)=>{
   console.log(err);
});

It returns the following data:

{ args: {},
JS:   headers:
JS:    { Accept: 'application/json, text/plain, */*',
JS:      'Accept-Encoding': 'gzip',
JS:      Host: 'httpbin.org',
JS:      'User-Agent': 'Dalvik/1.6.0 (Linux; U; Android 4.4.4; GT-I9060I Build/KTU84P)' },
JS:   origin: '79.152.179.88, 79.152.179.88',
JS:   url: 'https://httpbin.org/get' }

Do you have any insights into what might be causing the issue?

Answer №1

To ensure compatibility with http, it is necessary to include the following line in your app/App_Resources/Android/src/main/AndroidManifest.xml within the application tag: android:usesCleartextTraffic="true"

Here's how it should look:

<application ...
    android:usesCleartextTraffic="true"

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The grid flex end is behaving differently than I anticipated

I am struggling to align two buttons vertically on the right side. Here is my code snippet: const WalletsContainer = () => { return ( <Grid style={{ background: 'red' }} direction={'column'} alignItems={'flex-end'} ...

Is utilizing React's useEffect hook along with creating your own asynchronous function to fetch data the best approach

After attempting to craft a function for retrieving data from the server, I successfully made it work. However, I am uncertain if this is the correct approach. I utilized a function component to fetch data, incorporating useState, useEffect, and Async/Awa ...

What is the best way to get access to a UITableView Cell that is currently off-screen?

Is there a way to access or update UITableView cells that are not currently visible on the screen? I understand that table view cells are reusable, which may be why I am having difficulty fetching them. Is there a way to virtually create and update these ...

The sessionToken is invalidated upon the user updating their password

My mobile hybrid app is connected to an expressJS server that acts as the backend for proxying requests to parse.com through the REST API. Additionally, I have implemented user authentication using express with a Single Sign-On (SSO) provider. Although I f ...

Angular - Utilizing controllers without any associated HTML elements and utilizing broadcasted events

My situation is a bit peculiar. I have a controller that I need to manage when a dialog opens. I am utilizing ngDialog along with templates and directives. Below is the code for DialogController: (function() { 'use strict'; angular.modu ...

Displaying a concealed form or Unveiling a popup dialog

What is the most effective way to display a simple form on an HTML page with a save button that calls a web method? I'm currently contemplating between the following options: Reveal a hidden <div> containing a form with the same functionality ...

Removing one element from an array with mongoose

As a newcomer to web development, I am currently working on creating a todo app. Below is the schema and model that I have: const tdSchema = new mongoose.Schema({ category: { type: String, required: true, unique: true }, tds: { type: ...

When executing a JavaScript program, an error with the message 'MODULE_NOT_FOUND' appeared, causing the internal module loader in Node to throw an error at line 1145

node:internal/modules/cjs/loader:1145 throw err; ^ Error: Module 'C:\Users\sande\3D Objects\JavaScript-Lesson\lesson08.js' not found at Module._resolveFilename (node:internal/modules/cjs/loader:1142:15) at Mo ...

Typescript Error: TS2339: The property 'faillogout' is not found within the type '{ failed(): void; onSubmit(): void; }'

I encountered an issue with my Vue.js app using TypeScript. The error message I'm getting is: Property 'faillogout' does not exist on type '{ failed(): void; onSubmit(): void; }'. 101 | failed () { This snippet shows the s ...

The image is reverting to its previous position, translating in an Android XML file

I'm attempting to animate an image from its current position to a new one by using the following code: XML <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" ...

Display <tr> tag when button is clicked without refreshing the page

I have a specific requirement to hide a certain tag initially. If the user clicks the forward button without selecting any radio buttons or checkboxes, the tag should be displayed and the page should not refresh. However, there seems to be an issue with ...

Support for Arabic in database, PHP, and JavaScript

After inputting an Arabic comment into a textarea on the site, it displays correctly as "عربي" and is successfully sent to the database. However, upon refreshing the page, the text appears garbled: "عربÙ�". I attempted to directly enter s ...

Express: router.route continues processing without sending the request

I've implemented the following code in my Express application: var express = require('express'); // Initializing Express var app = express(); // Creating our app using Express var bodyParser = require(' ...

Ensure that the image within the div consistently occupies an equal amount of space at all times

<div id=“parent”> <div id = "child1"> <img src="123"/> </div> <div id = "child2"> <p> Some text1 </p> <p> Some text2 </p> </div> </div> In my HTML stru ...

What is the best way to download and execute a Javascript script in real-time using the Javascript console?

Is there a quick JavaScript console command to download and run a script from a remote source? I am interested in finding an efficient method to obtain this specific script for interactive experimentation on various pages that may not have jQuery loaded. ...

Unable to make changes to the text within the textarea field

Currently, I am in the process of creating a script to streamline the tedious task of providing teaching feedback. To scrape data such as student names and classes, I am utilizing selenium/python. While everything is running smoothly, I have encountered an ...

What are some ways to style an image that has been added using JavaScript using CSS?

I utilized a JavaScript function to add an image, which looked like this: function show_image(src) { var img = document.createElement("img"); img.src= src; document.body.appendChild(img); } But when I attempt to change its style using CSS: img ...

Executing the event handler only once

In my React project, I have a button that toggles a boolean state. However, I realized that the button can both set and unset the state due to its toggle functionality. I only want the state to be changed once. Is there a different function I can use ins ...

How can you gradually fade out the bottom edge of a rendered component until it is re-rendered?

Currently, I am developing a reviews microservice for an e-commerce platform using react and react-bootstrap. My goal is to showcase 5 reviews initially, followed by a button to expand and reveal more reviews. In order to achieve this, I envision the botto ...

Performing an HTTP GET request to an endpoint within a RESTful API

I am looking to integrate a feature in my web application that displays the list of online users on my website. To achieve this, I need to make an HTTP GET request to the URL which returns the user data in JSON format. The returned JSON data contains var ...