web-dev-qa-db-fra.com

Traitement des problèmes de la SCRO dans Ionic

Je crée une API avec notre script de serveur API et j'essaie de communiquer avec l'API sur l'application de cadre IONIC. Je suis en train de travailler, mais l'erreur d'erreurs bloquées cross-Origin continue de s'afficher: 

 enter image description here

javascriptandroidangularjsionic-framework
5
olajide

Lors du développement local en utilisant ionic serve ou ionic run/emulate -l -c avec livereload activé, ionic crée un serveur de développement local sur le port 8100 par défaut (http://localhost:8100/). La Origin dans ce cas est localhost:8100; lorsque vous contactez un service externe via HTTP avec CORS activé, la demande est considérée comme non fiable et donc rejetée.

Comme suggéré par Ionic ( http://blog.ionic.io/handling-cors-issues-in-ionic/ ), vous pouvez créer un alias de proxy dans l'application Ionic pour acheminer les appels d'API, en évitant La version Origin tout à fait, cependant, leur guide était spécifique à Ionic 1, voici donc une mise à jour pour Ionic v2. 

Création d'un proxy dans Ionic v2

Ouvrez ionic.config.json et ajoutez la configuration proxies suivante. 

{
  "name": "project-name",
  "app_id": "xyz-projectid",
  "v2": true,
  "TypeScript": true,
  "proxies": [{
    "path": "/api",
    "proxyUrl": "https://the-real-api-Host.com"
  }]
}

Dans ce cas, nous créons un chemin dans l'application ionique à /api, qui transmettra les demandes au noeud final https://the-real-api-Host.com ..____. Si vous voulez utiliser un autre noeud final api, par exemple http://my-custom-api.com/api/v2/, vous pouvez l'insérer dans proxyUrl.

Mise à jour des références au point de terminaison de l'API

Dans votre code d'application, vous devez maintenant mettre à jour toutes les références de l'URL de base du noeud final de l'API à https://the-real-api-Host.com avec /api. Un appel à /api doit être détecté en service ionique et transmis à l'adresse réelle.

La mise en œuvre de chaque projet peut varier. Dans mon cas, je n'avais pas le contrôle de l'API, car il s'agissait d'un service externe, je ne pouvais donc pas contrôler la gestion/les réponses CORS.

Remarque: n'oubliez pas de redémarrer le serveur (ionic serve) sinon vous obtiendrez des 404 à partir de votre appel d'API car il ne sera pas encore proxy.

16
Phillip Hartin

La création d'un proxy ne fonctionne que lorsque vous exécutez Ionic sur votre navigateur à l'aide de ionic -serve. Le problème CORS est toujours un problème lorsque vous utilisez votre appareil, spécialement sous iOS avec WKWebView.

Dans ces cas, vous pouvez utiliser le plug-in HTTP natif de Cordova.

Voir ici pour plus de détails:

https://hackernoon.com/a-practical-solution-for-cors-cross-Origin-resource-sharing-issues-in-ionic-3-and-cordova-2112fc282664

3
Ari

Si vous ne pouvez pas modifier la configuration du serveur, vous devez utiliser Plugin natif Http pour effectuer des requêtes Http à partir de votre appareil mobile, afin de prévenir les problèmes cors. Cependant, dans l'environnement Web, vous devez toujours utiliser HtttClient d'Angular. Heureusement, avec ionic-native-http-connection-backend library, vous pouvez utiliser le même service HttpClient pour les deux environnements, et Http native sera utilisé en interne si l'application est exécutée à partir d'un appareil mobile. C'est une sorte de wrapper.

1
José Antonio Postigo

L'erreur Cors ne peut être résolue que du côté serveur . Mais oui, pour les navigateurs uniquement, nous pouvons le résoudre en installant l'extension cors, mais pour l'appareil, il ne peut s'agir que du côté serveur.

1
Rajnesh Rathor

Le problème ne concerne que la phase de développement. Le meilleur moyen de le résoudre est d'installer l'extension "Allow-Control-Allow-Origin" en chrome.

0
Musab