Angular JS - $http fonction sur PC, pas sur mobile

Par Djokx, il y a 10 ans

Javascript

Bonjour,

J'apprends en ce moment à faire une app sous Cordova, tout en apprenant à utiliser Angular JS.
J'essaye simplement d'utiliser l'API de Maps qui fonctionne très bien à l'aide de $q, $http:

app.controller('HomeCtrl', function($http, $q, $rootScope, $scope){ $scope.cityOrigin = "Tours"; $rootScope.pannel = 0; $rootScope.menu = 'home'; $scope.DistanceToParis = function() { $scope.currentCity = $scope.cityOrigin; var deferred = $q.defer(); var url = "https://maps.googleapis.com/maps/api/distancematrix/json?origins="+ $scope.cityOrigin +"&destinations=Paris"; $http.get(url) .success(function(data, status){ dist = data; deferred.resolve(dist); }).error(function(data, status){ deferred.reject('Impossible de récupérer les trajets.') $scope.loader = false; }) return deferred.promise; } $scope.getDistanceToParis = function(){ $scope.loader = true; return $scope.DistanceToParis().then(function(dist){ $scope.loader = false; $scope.distanceToParis = dist; }) } }); ```

Sur PC ça fonctionne sans aucun soucis, mais quand je passe sous mobile (accès direct à l'URL, j'ai rien compilé encore) à l'aide de Chrome Mobile, et bien $scope.distanceToParis ne charge pas. D'après mes test, on arrive bien l'error de DistanceToParis.

Quelqu'un sait d'où cela peut venir ? J'ai essayé sous deux téléphones Android, ça ne marche sur aucun. Par contre sous chrome PC, en mode simulateur de téléphone, ça fonctionne sans soucis.

-- Edit
ça ne marche pas non plus sous firefox (PC), mais ça marche toujours bien sur Chrome.

9 réponses

malikmotii, il y a 8 ans

bonjour messieurs je vous remercie pour voas aides vos efforts j'avais le meme probleme avec ionin 3 en local ca marche bien mais quand je= heberge mon api et ma BD mysql le navigateur s affiche cette erreur sachant que lapi ca matche bien
erreur :
Blocage d'une requête multi-origines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur https://maps.googleapis.com/maps/api/distancematrix/json?origins=London&destinations=Warwick+School. Raison : l'en-tête CORS « Access-Control-Allow-Origin » est manquant.

merci de me reponde a mon probleme c 3 jours de recherche sans aucune solution

api :
<?php
include ("db.php");
header("Content-Type: application/json; charset=UTF_8");
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods: GET, POST');

    $query = "select * from news ORDER BY jour DESC";
    $result = $db->query($query);

    $res['news'] = [];
    while($cat = $result->fetch_assoc()) {
        $res['news'][] = $cat;
    }
    echo json_encode($res);
keulu, il y a 8 ans

c'est pas la method OPTIONS qui pose probleme ?

généralement, le CORS ca se configure au niveau du serveur WEB (c'est plus propre)

voici une tite conf nginx qui devrait fonctionner.

location ~ \.php$ { if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'Keep-Alive,User-Agent,X-Requested-With,Cache-Control,Content-Type,X-Authorization'; add_header 'Access-Control-Max-Age' 1728000; add_header 'Content-Type' 'text/plain charset=UTF-8'; add_header 'Content-Length' 0; return 204; } if ($request_method = 'POST') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'Keep-Alive,User-Agent,X-Requested-With,Cache-Control,Content-Type,X-Authorization'; } if ($request_method = 'GET') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'Keep-Alive,User-Agent,X-Requested-With,Cache-Control,Content-Type,X-Authorization'; } }
Romano83, il y a 10 ans

Si tu trouve une réponse, je suis preneur...
Ca fait deux jours que je me casse les dents pour essayer de trouver une solution à se problème !!!

Grafikart, il y a 10 ans

Sors la console et vois les erreur générées

Djokx, il y a 10 ans

Bonjour et merci pour ta réponse,

Alors, oui voilà c'est une erreur de cross-origin. J'avais oublié que j'avais l'extension CORS sur chrome qui tournait, d'où le fait que ça marche sous chrome.
ça marche aussi en compilant, mais y aurait-il une façon de faire pour que ça marche tout le temps, en rajoutant une certaine meta par-exemple ?

Blocage d'une requête multi-origines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur https://maps.googleapis.com/maps/api/distancematrix/json?origins=London&destinations=Warwick+School. Raison : l'en-tête CORS « Access-Control-Allow-Origin » est manquant.

Djokx, il y a 10 ans

Pour le moment la seule chose que j'ai trouvé c'est de retirer la meta: * http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src "**

Donc je pense qu'en matière de securtié c'est vraiment pas idéal mais ça marche pour la phase de dev. Donc en attendant une vraie solution, je reste comme ça.

Romano83, il y a 10 ans

Oui, j'ai déjà enlevé cette meta mais sans résultat...
Mais dans ton cas, lorsque tu enlève cette meta, ça fonctionne aussi quand tu dev sur mobile (j'entend pas la quand tu lance la commande ionic run <platform>) ?

Djokx, il y a 10 ans

Je fais le run sous cordova mais je suppose que ça revient au même, et oui, justement, une fois la meta retirée, l'API fonctionne sur l'App.

Romano83, il y a 10 ans

oui c'est la même commande.
C'est bizarre, chez moi, ça ne fonctionne pas... je réessairais demain au boulot pour voir !