HTTPS request fails only on iOS, Ionic 2

Question

I have an application Ionic 2that calls an API Spring Bootto send push notifications to other devices. The API is configured using HTTPS.

The API request POSTworks on all but iOS .

My SSL certificate on the server is signed on its own (maybe this?).

Works for:

• ion feed
• Android
• Postman
• curl

Here is the request:

public sendNotificationRequest(title: string, action: string, name: string, tokens: any, notifications: boolean) {
    // Check if user turned off notifications
    if(!notifications) {
        return;
    }

    let headers = new Headers({'Content-Type': 'application/json'});
    headers.append('Authorization', 'Basic ' + btoa(this.username_decrypted + ':' + this.password_decrypted));
    let body = this.formObj(tokens, title, action, name);
    console.log(body);

    this.http.post("https://<some-url>",
                    body, { headers: headers }
    ).subscribe((response) => {
        console.log("HTTPS RESPONSE");
        console.log(response);
    }, function(error) {
        console.log("HTTPS ERROR");
        console.log(error);
    });
}

The header responses are as follows:

response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");

And this error is received:

{
 "_body":
    {"isTrusted":true},
    "status":0,"ok":false,
    "statusText":"",
    "headers":{},
    "type":3,
    "url":null
}

Spring API downloads:

@CrossOrigin
@RequestMapping(value="/notifications", method=RequestMethod.POST, consumes=MediaType.APPLICATION_JSON_VALUE, produces=MediaType.APPLICATION_JSON_VALUE)
public ResponseEntity<NotificationParent> sendNotifications(@RequestBody NotificationParent objs) {
    ...
    return new ResponseEntity<NotificationParent>(objs, HttpStatus.OK);
}

I suspect an iOS security issue, but have no idea.

Answer 1

, - iOS. iOS - App Transport Security, , , HTTP .

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

Info.plist , .

. , .

http://blog.ionic.io/preparing-for-ios-9/

https://gist.github.com/mlynch/284699d676fe9ed0abfa

https://developer.apple.com/library/prerelease/content/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW33

Answer 2

. WkWebView .

ionic cordova plugin remove cordova-plugin-wkwebview-engine

:

https://forum.ionicframework.com/t/ios10-http-requests-blocked/67663/2?u=profitsventure

http- iOS

Answer 3

API Java , , Node Express. .

"use strict";
// BASE SETUP

// call the packages we need
var express    = require('express');        // call express
var fs         = require('fs');
var https      = require('https');
var app        = express();                 // define our app using express
var bodyParser = require('body-parser');
var basicAuth  = require('express-basic-auth');
var cors       = require('cors');

// configure app to use bodyParser()
// this will let us get the data from a POST
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// ROUTES FOR OUR API
var router = express.Router();              
// get an instance of the express Router

// all of our routes will be prefixed with /api
var auth = basicAuth({
    users: { 'xxx': 'xxx' },
    unauthorizedResponse: getUnauthorizedResponse
});

app.use(cors())
app.options('*', cors()); // include before other routes

// middleware to use for all requests
router.use(function(req, res, next) {
    // do logging
    console.log('Notification being processed.');
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next(); // make sure we go to the next routes and don't stop here
});

app.use('/xxx/api', auth, router);

// on routes that end in /notifications
// ----------------------------------------------------
router.route('/notifications')
// post notifications, :8443/api/notifications
.post(function(req, res) {
    ...
    res.end();
});

// START THE SERVER
https.createServer({
    key: fs.readFileSync('xxx.key'),
    cert: fs.readFileSync('xxx.crt'),
    passphrase: 'xxx'
}, app).listen(8443);
console.log('Magic happens on port 8443');

function getUnauthorizedResponse(req) {
    var message = req.auth ?
        ('Credentials ' + req.auth.user + ':' + req.auth.password + ' rejected') :
    'No credentials provided';
    return {error: message};
}

Answer 4

@ionic-native/http @angular/http.

HTTP-: https://ionicframework.com/docs/native/http/

https://blog.ionicframework.com/wkwebview-for-all-a-new-webview-for-ionic/