Why is jQuery Ajax not working in Cordova iOS app

Question

I am building a Cordova app that uses jQuery Ajax to upload images to our server. The uploads were working for a while on both Android and iOS, then after a while they suddenly stopped working on iOS. Now, after a few seconds of trying to access a website, the request fails and I get an error message, which isn't much help. The error is like the following:

readyState: 0
status: 0
statusText: "error"

My code is:

    $.ajax("http://testapi.com/api", {
        data: submission,
        processData: false,
        contentType: false,
        method: "POST",
        // submission was successful
        success(data) {
          if (JSON.parse(data).success) {
            // backend validated and accepted submission
          } else {
            // backend rejected submission due to validation errors
          }
        },
        // submission failed
        // eslint-disable-next-line no-unused-vars
        error(xhr, text, error) {
          alert(
            JSON.stringify(xhr) + "  " + text + " " + JSON.stringify(error)
          );
        }
      });

My Content Security Policy, in index.html is:

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

And config.xml is: `

    <config-file parent="NSCameraUsageDescription" target="*-Info.plist">
        <string>World Bee Count needs access to your camera and photo library</string>
    </config-file>
    <edit-config file="*-Info.plist" overwrite="true" target="NSLocationWhenInUseUsageDescription">
        <string>need location access to find things nearby</string>
    </edit-config>
    <edit-config file="*-Info.plist" overwrite="true" target="NSLocationAlwaysAndWhenInUseUsageDescription">
        <string>need location access to find things nearby</string>
    </edit-config>
    <string file="*-Info.plist" overwrite="true" target="NSLocationAlwaysUsageDescription">
        <string>need location access to find things nearby</string>
    </string>
    <config-file parent="NSPhotoLibraryUsageDescription" target="*-Info.plist">
        <string>World Bee Count needs access to your camera and photo library</string>
    </config-file>
    <preference name="StatusBarOverlaysWebView" value="false" />
    <preference name="StatusBarBackgroundColor" value="#2D81C1" />
    <preference name="Fullscreen" value="true" />
    <feature name="CDVWKWebViewEngine">
        <param name="ios-package" value="CDVWKWebViewEngine" />
    </feature>
    <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
    <preference name="WKWebViewOnly" value="true" />
</platform>
<engine name="ios" spec="5.1.0" />
<plugin name="cordova-plugin-geolocation" />
<plugin name="cordova-plugin-device" />
<plugin name="cordova-plugin-file" />
<plugin name="cordova-plugin-filepath" />
<plugin name="cordova-plugin-whitelist" />
<plugin name="cordova-plugin-add-swift-support" />
<plugin name="com.subitolabs.android.cordova.galleryapi" spec="https://github.com/Collaborne/cordova-gallery-api.git"></plugin>
<plugin name="cordova.plugins.diagnostic" />
<plugin name="cordova-plugin-android-permissions" />
<plugin name="cordova-plugin-splashscreen" source="npm" />
<plugin name="cordova-plugin-camera-preview"></plugin>
<plugin name="cordova-plugin-wkwebview-engine" spec="~1.2.1" />
<plugin name="cordova-plugin-screen-orientation" spec="~3.0.2" />`

<access origin="*" />
<allow-intent href="*" />
<allow-navigation href="*" />

I am running this on iOS 13 and using PhoneGap build

My problem is most similar to this Ajax Not working in IOS 9.0 Cordova

I tried updating my config.xml according to this question But it doesn't seem to be working

Any help is would be very much appreciated, I've been working on this for hours and can't seem to get anywhere

Having the same issue, did you solve this? – gregwinn May 19 '20 at 03:43 — gregwinn, May 19 '20 at 03:43
Yes I did, I will add my solution with code – yCombinator May 20 '20 at 20:20 — yCombinator, May 20 '20 at 20:20

score 9 · Accepted Answer · answered May 20 '20 at 20:35

9

OK, I found the problem was because of a recent update from UIWebView to WKWebView, which was breaking the Ajax code. I added the cordova-plugin-wkwebview-file-xhr plugin to my project as described in the documentation. I also removed the version spec on the WKWebView engine plugin. My config.xml was edited to include the following:

<plugin name="cordova-plugin-wkwebview-engine" />
<plugin name="cordova-plugin-wkwebview-file-xhr" spec="~2.1.4" />

And under

<platform name="ios">
....
<preference name="AllowUntrustedCerts" value="on" />
<preference name="InterceptRemoteRequests" value="all" />
<preference name="NativeXHRLogging" value="full" />

I tried various combinations of the preferences, but only this combination worked. However, NativeXHRLogging could be disabled as it didn't seem to matter. After this everything started working once again

answered May 20 '20 at 20:35

yCombinator

113
4
15

This seems to not work under cordova-ios 6.1.0 - the WKWebView engine has been integrated and adding file-xhr only tries to bring in the cordova-plugin-wkwebview-engine plugin, which causes build errors. Any ideas? – Aaron Mason Aug 19 '20 at 02:50
@AaronMason I am also facing the same issue. Build is failing after I add cordova-plugin-wkwebview-engine plugin. – subbu Oct 14 '20 at 17:25
@subbu if you're using cordova-ios 6.1.0, the solution is to remove that plugin and add a line like this to your config.xml: `` then have your backend send an `Access-Control-Allow-Origin` header with that URL scheme rather than of http/s. – Aaron Mason Oct 15 '20 at 02:51
I'm currently having the same problem. I'm using cordova-ios 6.1.1 and I have removed the cordova-plugin-wkwebview-engine plugin but ajax still doesn't work... I still get Preflight response is not successful.. Failure to load resource. I have tried adding `cordova-plugin-cors` but that doesn't work too.. any other suggestion? – Donnie Imafidon Dec 30 '20 at 09:59

score 2 · Answer 2 · answered Jan 21 '21 at 23:49

I had the same problem when building with Cordova IOS 6.1.1.

I tried above solution but got build errors with -engine as mentioned.

I removed -engine and just used the latest file-xhr and it worked.

Just use the following plugin, worked with or without the above mentioned preferences.

<plugin name="cordova-plugin-wkwebview-file-xhr" source="npm" version="3.0.0" />

Why is jQuery Ajax not working in Cordova iOS app

2 Answers2

Linked