Connecting to a local server from a Cordova app using JavaScript

Backend
1

Hey everyone! I’m new to Cordova and I’m trying to make a simple login page that talks to my local server. I’ve got the HTML set up with a form and a submit button. In my JavaScript, I’m using fetch to send a POST request to my server when the button is clicked. The server is set up to log a message when it receives the request.

function loginAttempt() {
  const serverAddress = 'http://127.0.0.1:8080/login';
  const requestOptions = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    }
  };

  fetch(serverAddress, requestOptions)
    .then(response => response.json())
    .catch(error => console.error('Error:', error));
}

But nothing happens when I click the button. The server doesn’t log anything. Am I missing something in my Cordova setup? Or is there an issue with how I’m handling the request? Any help would be great!

2

hey there! i had a similar issue. try using ur actual IP address instead of localhost. also, make sure u’ve added the right permissions in config.xml. oh, and don’t forget to wait for ‘deviceready’ before making network requests. that tripped me up at first too!

3

hmmm, interesting problem! have u considered using the cordova-plugin-whitelist? it might help with network access. also, what about trying a different port? sometimes 8080 can be finicky. oh, and have u checked the console for any error messages? those can be super helpful for debugging. what else have u tried so far?

4

One common issue when trying to connect to a local server from a Cordova app is the security restrictions imposed by mobile platforms. Your app likely can’t reach ‘http://127.0.0.1:8080’ because it’s not accessible from the device’s perspective.

Instead, try using your computer’s actual IP address on your local network. You can determine this by checking your network settings or using ‘ipconfig’ on Windows or ‘ifconfig’ on Mac/Linux in the terminal.

Also, ensure that the necessary permissions are added to your config.xml file:

Lastly, remember to use the ‘deviceready’ event before making network requests in Cordova to ensure that the Cordova API is fully loaded.