web-dev-qa-db-fra.com

ionic probleme No 'Access-Control-Allow-Origin'

Je travaille sur une ionic. Mon problème est: lorsque j'essaye d'obtenir des données du serveur, j'ai ceci:

XMLHttpRequest ne peut pas se charger https://mywebsite.com/api . Aucun en-tête "Access-Control-Allow-Origin" n'est présent sur la ressource demandée. L'origine ' http: // localhost ' n'est donc pas autorisée à accéder.

J'essaie déjà d'ajouter ceci à .htaccess: Ensemble d'en-têtes Access-Control-Allow-Origin: *

Et ceci sur ma page api (PHP): header ('Access-Control-Allow-Origin: *');

mais ne fonctionne toujours pas

$ http.get (url) .success (fonction (réponse) {...}

ionic-frameworkionic2
9
bakrim

Mettez-le au-dessus de votre fichier PHP comme:

<?php
header("Access-Control-Allow-Origin: *");
// then your stuff goes here

?>

Remarque: comme pour toutes les utilisations de la fonction d'en-tête PHP, cela doit être avant toute sortie envoyée par le serveur.

18
Arul

Ce problème de cors a une solution simple en ionique.

Accédez à votre ionic.config.json (auparavant ionic.project) et ajoutez un proxy par exemple:

{
  "name": "proxy-example",
  "app_id": "",
  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "http://cors.api.com/api"
    }
  ]
}

Après cela, utilisez "/ api /" au lieu de " https://mywebsite.com/api " lorsque vous appelez votre api.

Pour plus d'informations:

http://blog.ionic.io/handling-cors-issues-in-ionic/

10
misha130

prémisse: ce problème est généralement exécuté uniquement ionic serve, ou en utilisant ionic comme application Web, pas dans ionic comme application) .

Vous pouvez éviter de modifier votre projet et utiliser une extension pour désactiver CORS:

Pour développer avec Chrome, quelque chose comme ceci:

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related

ou, si vous en avez besoin pour Firefox, quelque chose comme ceci:

https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/

IE et Edge craint donc pour ceux-ci, vous devez désactiver manuellement CORS dans les paramètres

1
Luca C.

Il s'agit d'une erreur typique trouvée lorsque nous travaillons avec Angular et Ionic, le problème apparaît parce que lorsque votre application chargée dans un navigateur sur votre application charge tout le contenu d'un Origine provenant de votre adresse locale http://localhost:8100, puis lorsque vous souhaitez effectuer une requête AJAX envoyée à un autre hôte que localhost:8100 la requête est appelée à partir d'un point différent de l'origine elle nécessite un cors [~ # ~] [~ # ~] (Cross Origin Resource Sharing) demande de contrôle en amont pour voir s'il peut accéder à la ressource.

La solution est d'utiliser un proxy pour le backend, avec cela, vous pouvez détourner certaines URL et les envoyer à un serveur backend. La mise en œuvre est simple:

1.- Modifiez le fichier ionic.config.json dans le dossier racine de votre projet.

2.- Configurez votre proxy, dans votre ionic.config.json fichier mettre ceci, en supposant que votre nouvel hôte est dans http://localhost:3000.

   "proxies": [
{
  "path": "/endpoints",
  "proxyUrl": "http://localhost:3000"
}
  ]

3.- Dans votre Service changez un peu le chemin de votre demande depuis ce http://localhost:3000/endpoints/any/path/that/you/use pour ça ../endpoints/any/path/that/you/use (en supposant que l'autre hôte est dans localhost:3000 et le contexte est /endpoints)

Si vous avez besoin de plus d'informations à ce sujet, veuillez vérifier http://blog.ionic.io/handling-cors-issues-in-ionic/

1
havelino