CODEWITHSUNDEEP
angularjsionic-frameworkcorswkwebviewcordova-ios
Simone Campagna
Simone Campagna

Reputation: 1190

cordova ios 6.1.0 wkwebview some xhr POST fails

as everyone dev. using ionic stack, also we are moving into the new wkwebview due to the Apple requirements.

We already provide a build to ios without any kind of warning ( about uiwebview old code ) but we're still encountering a problem performing SOME POST calls.

Settings

We have already set cors server side ( Apache ) like below:

<filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>com.hrd.auth.tomcat7.cors.CorsFilter</filter-class>
    <init-param>
        <param-name>cors.allowed.origins</param-name>
        <param-value>app://myapp, http://localhost:9090</param-value>
    </init-param>
    <init-param>
        <param-name>cors.allowed.methods</param-name>
        <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
    </init-param>
    <init-param>
        <param-name>cors.allowed.headers</param-name>
        <param-value>Content-Type,X-Requested-With,Accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,User-Agent,DEVICE_ID</param-value>
    </init-param>
    <init-param>
        <param-name>cors.exposed.headers</param-name>
        <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
    </init-param>
    <init-param>
        <param-name>cors.support.credentials</param-name>
        <param-value>true</param-value>
    </init-param>
    <!-- <init-param>
        <param-name>cors.preflight.maxage</param-name>
        <param-value>10</param-value>
    </init-param> -->
</filter>
<filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

Here below instead, the current APP configuration:

<description>An app from company S.r.l.</description>
<author email="[email protected]" href="https://www.mycompany.com/">       Contact us  </author>
<content src="index.html" />

<!-- Permissions -->

<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />

<!-- Preferences -->

<preference name="webviewbounce" value="false" />
<preference name="KeyboardResize" value="false" />
<preference name="BackupWebStorage" value="none" />
<preference name="DisallowOverscroll" value="true" />
<preference name="AutoHideSplashScreen" value="true" />
<preference name="StatusBarStyle" value="lightcontent" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="FadeSplashScreenDuration" value="1500" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="KeyboardDisplayRequiresUserAction" value="false"/>

<!-- Hooks -->

<hook src="www/hooks/fwk-after-prepare-hooks.js" type="after_prepare" />
<hook src="www/hooks/fwk-after-plugin-add-hooks.js" type="after_plugin_add" />
<hook src="www/hooks/fwk-after-prepare-copy-build-extra-hooks.js" type="after_prepare" />
<hook src="www/hooks/fwk-after-compile-hooks.js" type="after_compile" />
<hook src="www/hooks/fwk-before-build-hooks.js" type="before_build" />

<!-- iOS -->

<platform name="ios">

    <!-- CORS -->
    <preference name="scheme" value="app" />
    <preference name="iosScheme" value="app" />
    <preference name="hostname" value="myapp" />

    <!-- Resouces -->
    <resource-file src="www/GoogleService-Info.plist" />
    <icon height="20" src="www/res/icon/ios/Icon-20.png" width="20" />
    ...
</platform>


<!-- PLUGINS LIST -->

<!-- LIST -->
<!-- Don't modify this plugins list because it's generate-->
<plugin name="cordova-plugin-app-version" spec="0.1.9"/>
<plugin name="cordova-plugin-calendar" spec="4.6.0"/>
<plugin name="cordova-plugin-call-number" spec="1.0.1"/>
<plugin name="cordova-plugin-camera" spec="4.1.0">
    <variable name="CAMERA_USAGE_DESCRIPTION" value="Allow_the_app_to_use_your_camera" />
    <variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value="Allow_the_app_to_access_your_photos" />
</plugin>
<plugin name="cordova-plugin-compat" spec="1.2.0"/>
<plugin name="cordova-plugin-device" spec="1.1.7"/>
<plugin name="cordova-plugin-facebook4" spec="6.2.0">
    <variable name="APP_ID" value="2553981324652029" />
    <variable name="APP_NAME" value="com.mycompany.myapp" />
</plugin>
<plugin name="cordova-plugin-file" spec="6.0.2"/>
<plugin name="cordova-plugin-inappbrowser" spec="4.0.0"/>
<plugin name="cordova-plugin-ionic-keyboard" spec="2.2.0"/>
<plugin name="cordova-plugin-media-capture" spec="3.0.3">
    <variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value="Allow_the_app_to_access_your_photos" />
</plugin>
<plugin name="cordova-plugin-network-information" spec="1.3.4"/>
<plugin name="cordova-plugin-splashscreen" spec="5.0.3"/>
<plugin name="cordova-plugin-statusbar" spec="2.4.2"/>
<plugin name="cordova-plugin-whitelist" spec="1.3.3"/>
<plugin name="cordova-plugin-sign-in-with-apple" spec="0.1.0"/>
<plugin name="cordova-plugin-wkwebview-inject-cookie" spec="1.0.6"/>

<engine name="ios" spec="6.1.0" />

Problem

The APP performs a successful POST call for login, with the following xhr details

"{\"method\":\"POST\",
\"post\":\"{
    \\\"username\\\":\\\"username\\\",
    \\\"password\\\":\\\"password\\\"
}\",
\"url\":\"http://192.168.1.129:8080/go/rest/security/appLogin/MY_APP_LOGIN\",
\"headers\":{\"Content-Type\":\"application/json\",
\"DEVICE_ID\":\"a91d602c140079f2e848f39e33a6ca88\",
\"Accept\":\"application/json,text/plain,*/*\"},
\"withCredentials\":true}"

BUT, in this call ( performed after having been authenticated ), is failing:

 "{\"method\":\"POST\",
\"post\":\"{
    \\\"test\\\":\\\"test\\\"
}\",
\"url\":\"http://192.168.1.129:8080/go/rest/security/userInfo\",
\"headers\":{
    \"Accept\":\"application/json,text/plain,*/*\",
    \"Content-Type\":\"application/json;charset=utf-8\"
},
\"withCredentials\":true}"

Environment Configuration

Have someone any idea for why that kind of call fails?

FAQ

  1. Unlike the first one ( login call ) the second one doesn't reach server CorsFilter.java class, so call "not exit from the APP"
  2. Our widget environment, unlike the mobile one, has been fixed for POST calls just putting inside call payload mocked data, in order to complain w3c browser specifications.

Very many thanks in advance Simone

Upvotes: 1

Views: 2459

Answers (1)

Simone Campagna
Simone Campagna

Reputation: 1190

We discovered issues about calls not reaching server CorsFilters.java class ( so impossibile to get some debug instance ).

Reading our sever log we discovered this row

192.168.x.x - - [02/Sep/2020:17:40:09 +0200] "OPTIONS /go/rest/security/userInfo HTTP/1.1" 401 7361 4286

This is a know well problems about preflight POST request so - we just add in our web.xml conf. file the following property

<web-resource-collection>
    <web-resource-name>REST</web-resource-name>
    <description>REST services</description>
    <url-pattern>/rest/*</url-pattern>
    <http-method-omission>OPTIONS</http-method-omission> <<--- add this row
</web-resource-collection>

In this way, all OPTIONS request were'll be accepted and NOT rejected!

Hope this will help someone with a weeks headache ;)

Simon

Upvotes: 1

Related Questions