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:
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.
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
.
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.
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:
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.
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.
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.