Error encountered when attempting to send ajax request to specified http endpoint using Cordova version 10

I've been struggling to successfully send JSON data to an HTTP URL (although I was able to successfully send the same data to an HTTPS URL). These are my current settings: config.xml

<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />

AndroidManifest.xml

android:usesCleartextTraffic="true"

HTML Header

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; img-src * data: 'unsafe-inline'; connect-src * 'unsafe-inline'; frame-src *"> 
<meta http-equiv="Content-Security-Policy" content="default-src * gap://ready file:; style-src 'self' 'unsafe-inline' *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *">

<script>
  $.ajax({
    type: "GET",
    url: url,
    dataType: "jsonp",
    jsonp: 'callback',
    crossDomain: true,
    async: true,
    data: {
      id: results.rows.item(i).id,
      bolla: results.rows.item(i).bolla,
      anno: results.rows.item(i).anno,
      magazzino: results.rows.item(i).magazzino,
      articolo: results.rows.item(i).articolo,
      quantita: results.rows.item(i).quantita,
      term: terminale
    },
    success: function (data) {
      console.log(data)
    },
    error: function (xhr, textStatus, err) {
      alert("readyState: " + xhr.readyState);
      alert("responseText: " + xhr.responseText);
      alert("status: " + xhr.status);
      alert("text status: " + textStatus);
      alert("error: " + err);
    }
  });
</script>

When using JSON, it returns devicereadystate=0, and when using JSONP, it returns devicereadystate=4 with a Error 404 (even though the URL works correctly in a browser).

Answer №1

It appears that the reason for this behavior is due to cordova-android 10.0.x, where the webview now functions as a secure https page, preventing loading or sending data to non-secure origins.

According to the documentation provided by Cordova:

By default, the WebViewAssetLoader feature allows apps to serve their content from a 'proper' origin, facilitating routing for frameworks like Angular.

Without any additional configurations, the app's content is served from https://localhost/. The hostname can be customized by adjusting the preference option "hostname".

   <preference name="hostname" value="localhost" />

It should be noted that the scheme, https, cannot be altered inherently.

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

Ways to eliminate an item from an array when the value of the object is not present

I am facing an issue with removing objects from an array that do not contain the data object. I have attempted to use the filter method but have not been successful. results.filter(obj => obj.data === undefined) results = [ {id: 1, location: 'a&a ...

Is it possible to iterate through an object with multiple parameters in Op.op sequelize?

Currently, I am in the process of setting up a search API that will be able to query for specific parameters such as id, type, originCity, destinationCity, departureDate, reason, accommodation, approvalStatus, and potentially more in the future. const opt ...

Make the div disappear after a specified time

Does anyone know of a code snippet that can make a couple of div elements fade out after a specific time period? Currently, I have the following example: <div id="CoverPop-cover" class="splash"> <div id="CoverPop-content" class="splash-center"> ...

Guide on how to dynamically display a specific field in Material Table React

Hey there! I'm currently working with Material Table in React and I have a question. I want to generate a label tag for every cell, so I tried the following: <Table onChangePage={handleChangePage} page={p ...

Ways to conceal a child div element without using any specific ID reference

I encountered an issue where I need to conceal all divs within a parent div except the first one. The challenge is that these divs do not possess any unique identifiers. Is there a way to achieve this task using CSS or pure JavaScript? <div role="list ...

If a div element includes a specific text, then update that portion of the text without altering the value of any variables

Need help removing text without affecting variables Attempting to translate a specific line with JQuery Looking to change text only, leaving the content within the strong tag intact $('.content-box__row div:nth-child(3)').text('') ...

Removing a single duplicated element from an array using jQuery

I'm facing an issue where if I try to remove the first element that I added using the button, all elements in the array get erased. However, when I remove the last element pushed, it works just fine. To tackle this problem, I attempted to use $.inArr ...

What is the process for adding an icon to each item in a listview?

I am working on setting icons for each item in a listview using Java code or XML layout. The listview contains multiple items and I want to assign an icon to each of them. Here is the icon that I am referring to: @Override public void onCreate(Bundle sa ...

Key factors to keep in mind when comparing JavaScript dates: months

Check the dates and determine if the enddate refers to the following month by returning a boolean value. Example startdate = January 15, 2020 enddate = February 02, 2020 Output : enddate is a future month startdate = January 15, 2020 enddate = January 2 ...

Finding the value of an input without having to submit it first and searching for it within a datalist

> Here is an example of HTML code <label>Person</label> <input name="PersonID" type="text" id="PersonID"> <label>Car Plate Number</label> <input name="PersonsCarPlateNumber" list="PersonsCarPlateNumbe ...

React checkbox displaying incorrect render

I'm currently working on developing a React component that acts as a tile representation. This particular component consists of a div containing a label and a checkbox. The issue I'm facing is that I can click anywhere on the component to trigg ...

Passing a querystring value to a Vue.js component

I am encountering an issue with passing a value from a querystring to my Vue component. The querystring looks like this: https://someurl.com?q=test My component is structured as follows: Vue.component('externalrecipes', { props: ['results&a ...

Ways to ensure a function is only triggered once using onmouseover

I'm fairly new to JavaScript and I've been attempting to create a function that only runs once. Here's the logo I've been trying to animate: <img src="img/logot2.png" id="logoutjs" onmouseover="move()" ...

Problem with Resource Query

My angular.js application includes a productsCtrl.js file that displays the following controller: app.controller('ProductsCtrl', ['$scope', 'Api', function($scope, Api) { $scope.products = Api.Product.query(); //De ...

Creating a span element to replace the list item class in a JavaScript Modal Pop-up

I recently set up a portfolio website that showcases my projects. When you click on a project, a modal window opens with a carousel gallery inside. On my .html page, the projects are organized like this: <li class="Project" data-modal="myModal_1"> ...

Make sure that the TextBox OnTextChanged event in ASP.NET triggers a "setTimeout" function before the OnClick event is fired

Imagine the following situation: <asp:TextBox ID="txt" runat="server" AutoPostBack="true" OnTextChanged="txt_TextChanged"></asp:TextBox> <asp:Button ID="btn" runat="server" OnClick="btn_Click" CausesValidation="false" UseSubmitBehavior="fal ...

Using the v-for directive before applying the Vue directive

I need help with displaying images in a carousel from data fetched via Firebase. I have created a directive, but the problem lies with the v-for loop. The directive is executed before the v-for loop, resulting in no items in the carousel. Directive: di ...

Refresh cloned element after making changes to the original element

Just starting to explore Jquery and looking for some guidance to get me started :) Question: I'm facing an issue with a cart total price that is displayed in a different part of the page using clone(). I want this cloned price to automatically update ...

Tips for creating a hidden tab that only appears when hovered over

When hovering over the link tag .cat-link a.navlink, each subcategory tab .subcategories div is displayed. However, I would like to hide all tabs initially and have them appear only when hovered over with the mouse. Once the mouse is removed, I want the t ...

JavaScript Decoding JSON with varying identifiers

The JSON data provided contains information about different types of vehicles, such as cars, buses, and taxis. { _id:"7654567Bfyuhj678", result:{ CAR:[ [ "myCar1", 12233 ], [ ...