"I encountered a CORS error with Framework7's $$.ajax, yet interestingly enough,

Struggling for hours with CORS error while using Framework $$.ajax, I finally decided to seek assistance from the community.

I am experimenting with PhoneGap and Framework7. Trying to access an API on my .local domain is resulting in a CORS error "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at . (Reason: CORS header 'Access-Control-Allow-Origin' missing).". Even though I have enabled CORS headers in .htaccess and can see the Access-Control-Allow-Origin "*" header in the response using REST client, Framework7 $$.ajax is still failing. I have set "crossDomain: true" in ajax configuration, but it does not resolve the issue.

While jQuery $.ajax works flawlessly in the browser, it fails on the mobile device within the PhoneGap app simulator.

Although jQuery seems to work in the browser and displays the Access-Control-Allow-Origin "*" header in the response headers, Framework7 continues to malfunction.

If possible, could you suggest a different combination of PhoneGap + another framework to develop the app?

Any help would be greatly appreciated.

javascriptajax.htaccesscorshtml-framework-7

Answer №1

After numerous attempts, I finally managed to get everything up and running smoothly. The key was taking a break with a 5k run followed by a refreshing shower before starting fresh. I meticulously added each element and conducted thorough tests. Now, Framework7 is operating seamlessly on both my browser and mobile device. It seems the crucial aspect was the order in which I integrated the libraries. The current order is as follows:

  1. cordova.js
  2. framework7.min.js
  3. my custom scripts

Within my custom scripts, I included the following code snippet:

document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
function onDeviceReady() {
    // your code
}

The CORS error that had been plaguing me is now a thing of the past without any adjustments made to my server configuration.

While the browser version functions flawlessly with a .local domain specified in my hosts file, the mobile version requires a .com domain for API access. This workaround suits me just fine.

I share this experience in hopes that it may assist others facing similar challenges.

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

Include buttons in the HTML template once JSON data has been received

I am working on a feature to dynamically add buttons to the DOM using JSON data fetched from an API when users visit the site. Although I have successfully implemented the function to retrieve the data, I am facing challenges in adding these buttons dynami ...

javascriptjqueryhtmljsonangularjs

Unable to identify the element ID for the jQuery append operation

After attempting to dynamically append a textarea to a div using jQuery, I encountered an issue. Despite the code appearing to work fine, there seems to be a problem when trying to retrieve the width of the textarea using its id, as it returns null. This s ...

javascriptjqueryappend

fast-csv has encountered an exception: the column headers do not match the expected values

Currently, I'm using fast-csv to validate data within my code. Here's a snippet of what it looks like: var fileName = req.files.uploadcsv.path; var fs = require("fs"); var stream = fs.createReadStream(fileName); var csv = require("fast-csv"); ...

javascriptnode.jscsv

Executing jQuery on page update can be achieved by utilizing event handlers to trigger

I have implemented jQuery multi-select to enhance the user experience of my Django app's multiselect feature. Upon initially rendering my page, I included the following script to bind any elements with the class 'multiselect' to the jQuery m ...

javascriptjquerypythonhtmldjango

The Vue ChartJS fails to display properly after the page is refreshed

Although this issue may appear to be a common one, some of the suggested solutions are outdated or no longer functional. My objective is to ensure that the chart remains responsive even after the page reloads. I attempted to implement the solution provided ...

javascriptvue.js

The challenge of navigating through $scope

In my Angular view/form, I have an input file element that is being utilized with ng-upload. The code snippet looks like this: <input id="img" type="file" name="image" onchange="angular.element(this).scope().setFile(this)"> <input id="imgname" ty ...

javascriptformsvalidationangularjs

Hiding a related field using a designated delimiter can be achieved with JavaScript

I am looking to create a function that hides the corresponding textarea field of a dropdown. This functionality will be utilized in multiple instances, hence the need for it to be within a function. <div id="formElement1" class="field"> <labe ...

javascriptjqueryhtml

Determining whether a PFUser is being created or updated with the AfterSave function

Struggling to differentiate between whether a PFUser is being updated or saved for the first time? I tried implementing a solution from parse.com here, but it's not working as expected. No matter what, I always end up with a false value, be it an init ...

javascriptiosswiftparse-platformparse-cloud-code

The context is undefined through which the state was passed

I am currently facing an issue with my context setup. When I pass a string as a property to the state, everything works perfectly. However, I intend to use a prop as the state. Here is what works: export class DataProvider extends Component { construct ...

javascriptreactjs

The preflight OPTIONS request for an AJAX GET from S3 using CORS fails with a 403 error

I have come across various discussions and issues related to this topic, but unfortunately, I have not been able to find a solution yet. I am attempting to use AJAX GET to retrieve a file from S3. My bucket is configured for CORS: <?xml version="1.0" e ...

ajaxangularjsamazon-s3cors

In JavaScript, .map does not function as expected

I've been experimenting with the map method on an array in JavaScript, and here is the structure of the array I've been working with: [ {"name":"supplier","elements":["beta","gama","alpha"]}, {"name":"commodity","elements":[]}, {"name": ...

javascriptarraysjsonreactjsobject

What is the best way to display a div in Chrome without allowing any user interactions?

I currently have a <div> placed on top of my webpage that follows the mouse cursor. Occasionally, users are able to move the mouse quickly enough to enter the tracking <div>. Additionally, this <div> sometimes prevents users from clicking ...

javascriptjqueryhtmlcss

What is the actual functionality of the successCallback?

I find the concept of callbacks quite perplexing as I struggle to grasp its purpose. The API I am currently working with includes an ajax function structured like this: "ajax": function ( method, url, data, successCallback, errorCallback ) { $.ajax( { ...

jqueryajaxcallback

Angular's unconventional solution to Firebase

I've been having trouble integrating Firebase with Angular. When I encountered an error stating that firebase.initializeApp is not a function, I hit a roadblock. const firebase = require("firebase"); (Previously, it was written as: import * as fireb ...

javascriptangularfirebase

"Implementing a .gif Preloader Before Executing Animation with jQuery

I am currently working on an animation project using Jquery. The project consists of various images in .png format and div tags, with some being small file sizes while others are as large as 5mb. Is there a way to incorporate a pre-loading (.gif) animatio ...

jqueryajax

"Upon clicking, toggle the addition or removal of the overflow hidden

I'm currently working on a function to add and remove the CSS property .css('overflow-y','hidden') using an onclick event, which I have successfully implemented. However, I am encountering an issue when attempting to remove this CS ...

javascriptjqueryhtmlcsstwitter-bootstrap

Sending data with HTML5 Post requests

function sendPost(){ alert("IN SEND POST"); var username = document.myForm.username.value; var password = document.myForm.password.value; alert("username"+username); alert("password"+password); console.log("in java script"); var url = "some url"; ...

ajaxxmlweb-servicesxmlhttprequest

Struggling with displaying MySQL data in JSON format using Highcharts

Currently, I am attempting to display data from a PHP file on an area graph by using the example found here. Initially, all the data was commented out before being passed to the array. Now, my focus is solely on displaying one portion of the data. I suspec ...

javascriptphpmysqljsonhighcharts

Guide on how to swap a string with a component in Vue

I have a string that contains placeholders ### and I want to replace them with values from an array. I created a component, but I'm not sure how to incorporate it into the string since the number of placeholders can vary. For instance, if there are 2 ...

javascriptvue.jsvuejs2vue-component

Tips for boosting ViteJs development mode performance

One issue I am facing is the slow server performance during development mode. After starting the server and opening the page in my browser, I have to wait 3–6 minutes for it to load! Initially, ViteJs downloads a small amount of resources, but then the ...

javascripttypescriptvue.jsvuejs3vite