CODEWITHSUNDEEP
javascripthtmlxmlhttprequestphonegap-build
F. Daniel
F. Daniel

Reputation: 73

PhoneGap Build and XMLHttpRequest

As a background - prior to this, I wrote some native Apps for iOS (Swift), but this is my first App using PhoneGap. My target is Huawei P8 lite, running Android 5.0. And I'm using PhoneGap Build.

So here's my problem: I've got some cgi-scripts running on a webserver server. I can execute these scripts just by opening a specific website. I wrote a little javascript function, that sends a HttpRequest to the server. PhoneGap-Build is used to generate an app from my html-code.

The problem is, that it works fine on my laptop (via Cable-connection, or via WIFI), but as soon as I try it out on my phone (via WIFI) it doesn't do anything. Here's my function:

function openGate() {
    var xhttp;
    if (window.XMLHttpRequest) {
        xhttp = new XMLHttpRequest();
    } else {
        alert("Error");
    }
    xhttp.open("GET", "http://172.17.113.100/cgi-bin/main.py?mod=door&op=open", "true");
    xhttp.send(null);
}

The associated HTML-file is loaded on my mobile device. This function is called when a button is pressed. Here's the associated code:

<!DOCTYPE html>
<html>
<head>
    <title>Steuerung-Screen</title>
    <scripe src="js/steuerung.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/steuerung.css" />
</head>
<body>
    <div class="Steuerung">
        <h1>Steuerung</h1>
    </div>
<div class="Control">
    <table>
        <tr>
            <td>
                <button type="button" id="up" onClick="openGate();"> <img src="img/Arrow_Up_nice.png" alt=""> </button>
            </td>
        </tr>
     </table>
</div>
</body>

Thank you for your time and your help!

Upvotes: 1

Views: 1253

Answers (1)

user3255670
user3255670

Reputation:

@f-daniel,
You have a few common mistakes.

  1. Did not set the version for your build. This has the side effect of breaking your code, and there are no blogs post to let you know this. Try to set the version for your build via phonegap-version. Set the versions for your plugins too.

  2. One side effect of "not setting the version" is you have to use the whitelist plugin and associated parts. It is not documented well. (I have notes. See below.) NOTE: This will likely get you fixed right away.

  3. Caution on opening socket to a website. (Note, this is what is the recommended way of getting data. However, if Google or Apple think you are writing a website wrapper, they may reject your app. (NOTE: I quote Apple directly on this in a link below.)

TO FIX:

On #1, READ:

On #2, You need to apply the whitelist system. It is required as of Cordova Tools 5.0.0 (April 21, 2015). For Phonegap Build, that means since cli-5.1.1 (16 Jun 2015)

Add this to your config.xml

<plugin name="cordova-plugin-whitelist"      source="npm" spec="1.1.0" />
<allow-navigation href="*" />
<allow-intent href="*" />
<access origin="*" /> <!-- Required for iOS9 -->

NOTE YOUR APP IS NOW INSECURE. IT IS UP TO YOU TO SECURE YOUR APP.

Add the following to your index.html

<meta http-equiv="Content-Security-Policy" 
         content="default-src *; 
                  style-src * 'self' 'unsafe-inline' 'unsafe-eval'; 
                  script-src * 'self' 'unsafe-inline' 'unsafe-eval';">

NOTE YOUR APP IS NOW INSECURE. IT IS UP TO YOU TO SECURE YOUR APP.

When you are ready to make your app secure, read this:
HOW TO apply the Cordova/Phonegap the whitelist system

On #3, Read #5 of (especially the last part of #5, See quote from Apple)
Top Mistakes by Developers new to Cordova/Phonegap

Too tired right now to add. I will check on this in 12 hours.

Upvotes: 1

Related Questions