Why does calling $resource (or $http) from inside a callback in Cordova and AngularJS result in a 404 error?

After successfully transitioning my functional angularjs web app to Cordova and compiling it for iOS, I encountered an issue while testing the app on iOS. When trying to access a local file from inside a callback response (after successfully accessing another local file with a 200 status), I kept receiving a 404 error. I even tried making both the initial request and the request from the callback to the same file, but the error persisted. Interestingly, when I changed the file to a remote URL, everything worked fine. Below is the relevant code snippet:

function promiseFunc1() {
  var wait = $q.defer();
  $http.get('config/resources.json').success(function (data, status, headers, config) {
    wait.resolve(data);
  });
  return wait.promise; 
}

function promiseFunc2() {
  var wait = $q.defer();
  $http.get('config/resources.json').success(function (data, status, headers, config) {
    wait.resolve(data);
  });
  return wait.promise; 
}

promiseFunc1()
 .then(function (result) {
   return promiseFunc2()
 })
 .done()

Any guidance on where I might be going wrong would be greatly appreciated!

Answer №1

In case your configuration directory is located outside of the public_html folder, you can access it using the following code:

$http.get('../config/resources.json')

Answer №2

It appears that there is a security issue with accessing a file through the navigator (CORS).

In order to resolve this issue, you can utilize the PhoneGap API by visiting the following link:

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 differentiate an iOS device (besides using the IMEI number)

Is there a way to distinguish between the devices used by my app users without relying on the imei? Are there any alternative methods available? ...

The ui.bootstrap.carousel component seems to be missing from the display

My Carousel is not displaying for some unknown reason. I have customized the implementation based on my project requirements which differ slightly from the standard guidelines. Despite this, it should function correctly as detailed below. By clicking on m ...

How can I perform a drag and drop action using Protractor?

Currently, I am working on a protractor test that requires dragging and dropping elements. The previous developers used angular drag and drop to implement this feature. After searching for a few hours, I haven't been able to figure out how to successf ...

Error: AngularJS: Invalid Argument Error. The argument 'ClientCtrl' is not defined as a function, it is currently undefined

As a newcomer to AngularJS, I am facing an issue while trying to add a controller to my website. Strangely, the other two controllers are functioning perfectly fine, but this particular one is not being recognized. Here is my app.js file: var app = angul ...

Vanishing HTML upon initial entry to the site using Gatsby and Material UI exclusively in live deployment

I run a blog using Gatsby that includes Material UI components to fetch markdown files through GraphQL. During development, everything operates smoothly. However, in production (after running gatsby build && gatsby serve), the HTML doesn't di ...

Is there a way for me to determine which specific dependency is triggering a warning due to utilizing another dependency?

After analyzing my browser console, I found the following warnings: index.js:126 [WDS] Warnings while compiling. warnings @ index.js:126 (anonymous) @ socket.js:47 sock.onmessage @ SockJSClient.js:67 EventTarget.dispatchEvent @ sockjs.js:170 ...

What is the way to display the final list item when clicking in jQuery?

I am attempting to achieve a specific behavior where clicking on a button will trigger the content below to scroll in such a way that only the last item in the list is visible. I have been using jQuery for this functionality, but unfortunately, it is not ...

Utilizing Angular with Onsen UI for efficient AJAX requests

Currently, I am delving into the world of app development with Monaca. I have been working on tweaking a sample application that uses Onsen and Angular frameworks. My main goal is to retrieve data from a remote file located on my server whenever necessary ...

What purpose does the div tagged with the class selection_bubble_root serve in Nextjs react?

Just starting out with Nextjs and setting up a new Next.js React project. I used create-next-app to initialize the code base, but then noticed an odd div tag with the class 'selection_bubble_root' right inside the body. Even though its visibility ...

The process of utilizing variables to form objects in ES6

My ES5 code contains a variable as shown below. var options = { clientId : clientId, keepAlive : keepAlive, clean : clean, reconnectPeriod : reconnectPeriod, will : lastWillMessage }; If I want to convert this to ES6, I can do so by writing ...

Webpack: Live reloading is not functioning properly, however the changes are still successfully compiling

Could someone help me understand why my React application, set up with Webpack hot reload, is not functioning properly? Below is the content of my webpack.config.js: const path = require('path'); module.exports = { mode: 'development&apo ...

Are you struggling with the issue of Function components not being able to be given refs? When you try to access the ref, it just fails. Perhaps you should consider using React.forwardRef

I have implemented the "styled" feature from Material UI to add styles to my components. Right now, I am in the process of cleaning up code to remove console errors. Initially, I encountered this warning message: "Warning: React does not recognize the con ...

Is there a more efficient way to optimize my coding for this Cellular Automata project?

As a beginner in programming, I wanted to delve into the world of cellular automata and decided to create my own using JavaScript. The project involves a simple binary (black and white) 2D CA where each cell updates its color based on the colors of its 8 ...

What is the process for conducting linting with nodemon?

Is it possible to utilize nodemon for linting my javascript without the use of build tools like gulp or grunt, in order to fully leverage node and npm? Nodemon's output can be piped. I am interested in using this feature for linting the changed file ...

When using the React Material Tree Table, I expect any new row added to automatically expand by default in the table tree structure

<MaterialTable title="title" columns={columns} data={data} icons={tableIcons} parentChildData={(row, rows) => rows.filter((item) => item.id === row.productId)} /> ...

Invoking two asynchronous functions in React, where the first function relies on the state modified by the second function

Currently, I am working on an app that utilizes the Geoapify API. Within this app, I have implemented three primary API functions. Users are presented with two options on the user interface: they can manually search for cities or utilize their current loca ...

What could be causing the TypeError in my pg-query result?

In the process of creating a node function to add a user to a PostgreSQL database, I am utilizing node.js, pg, and pg-query for communication between the application and the database. Prior to inserting a new record, I am attempting to verify that the ema ...

Tips for selecting a pagination page number in Python with Selenium

I've been struggling to figure out how to interact with the page numbers of a pagination class for a while now. Despite trying various methods, I can only manage to highlight the container of the number without being able to actually click on it. Bel ...

How to Use RestKit on iOS to Retrieve a Specified Number of Elements Instead of the Entire

I am looking to implement an app similar to Twitter where objects are loaded in tens from the JSON data instead of loading all at once. Is there a way, using RestKit, for the "load more" button in UITableView to load the next ten objects if they exist in t ...

When working on a React/Redux application, how do you decide between explicitly passing down a prop or retrieving it from the global state using mapStateToProps?

As I embark on creating my inaugural React-Redux application, a recurring decision I face is whether to employ <PaginationBox perPage={perPage} /> or opt for <PaginationBox /> and then implement the following logic: function mapStateToProps({p ...