web-dev-qa-db-fra.com

La requête HTTPS n'échoue que sur iOS, Ionic 2

J'ai une application Ionic 2 qui appelle une API Spring Boot pour envoyer des notifications Push à d'autres périphériques. L'API est configurée avec HTTPS.

La requête API POST fonctionne sur tout sauf iOS.

Mon certificat SSL sur le serveur est auto-signé (c'est peut-être ça?).

Travaille sur:

  • service ionique
  • Android
  • Facteur
  • curl

Voici la demande:

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);
    });
}

Les réponses d'en-tête sont les suivantes:

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");

Et le cette erreur est reçue:

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

API de démarrage du printemps:

@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);
}

Je suppose que c'est un problème de sécurité iOS, mais je n'en ai aucune idée.

apispring-boothttpsionic2
6
theblindprophet

Je pense que votre hypothèse est correcte - un problème de sécurité iOS. Dans iOS, il existe quelque chose appelé App Transport Security qui interdit, par défaut, les connexions via HTTP et les connexions avec des certificats auto-signés.

Vous devez ajouter

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

au Info.plist de votre projet pour autoriser votre trafic auto-signé.

Voir cette réponse ainsi que les liens ci-dessous pour plus d'informations.

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

3
Daniel

J'ai eu le même problème aussi. Supprimer le WkWebView résout le problème.

ionic cordova plugin remove cordova-plugin-wkwebview-engine

Plus d'informations: 

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

Après la suppression de ce plugin, je peux effectuer une requête http via iOS

4
Ferdy Fauzi

Pour les périphériques iOS, WebViewEngine par défaut utilise toujours CORS. Pour le désactiver temporairement, ajoutez le <preference name="CordovaWebViewEngine" value="CDVUIWebViewEngine" /> au config.xml. Toutefois, le déclassement à UIWebViewEngine a de mauvaises performances. Le résoudre du côté serveur est la bonne solution.

Le serveur HTTP doit être configuré pour avoir la bonne réponse à la demande de contrôle en amont CORS OPTIONS. Le point clé est que les en-têtes de contrôle d'accès ne peuvent pas être «*» et doivent inclure tous les en-têtes personnalisés utilisés dans votre application. Ci-dessous mon réglage qui fonctionne:

Access-Control-Allow-Origin: * Access-Control-Allow-Methods: * Access-Control-Allow-Headers: Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, MyCustomHeader

0
Ying

Pour moi, le correctif consistait à utiliser @ionic-native/http au lieu de @angular/http.

Documents HTTP natifs ioniques: https://ionicframework.com/docs/native/http/

Voici ce qui m'a conduit à cette solution de contournement https://blog.ionicframework.com/wkwebview-for-all-a-new-webview-for-ionic/

0
matt.mercieca