Http get google maps api access-control-allow-origin

Support
1

Bonjour,

j’ai un petit soucis avec google.maps.api request, je voudrais avoir Response de la reqête mais le message de no ‘Access-control-allow-origin’ bloque l’accès aux information.

mon code:
$.ajax({
url: “https://maps.googleapis.com/maps/api/place/details/json?placeid="+pid+"&key=(Le Api Key)”,
type: “GET”,
cache: false,
success: function(data){
console.log(data);
}
});

le message d’erreur:
ui:1 Failed to load maps.googleapis.com/maps/api/place/details/json?placeid=ChIJz8arxm00_RIRF0xwbgk2hb8&key=key&_=1525264852922: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘://formation1.demo.simplicite.io’ is therefore not allowed access.

le lien ça marche vu qu’il me génère les resultats Json avec le navigateur.
Comment activer acces-control-allow-origin: * avec Simplicite?
Merci

2

Ce paramétrage n’est pas coté Simplicité mais coté Google.

Nous sommes bien d’accord que vous utilisez une clé d’API Google qui vous appartient ? Si oui votre problème est à régler dans votre console Google en autorisant formation1.demo.simplicite.io dans les origines autorisées ou en autorisant toutes les origines:

image
image845×863 55.4 KB

3

PS: Et je pense qu’il manque aussi crossDomain: true dans votre appel $.ajax(...)

4

La restriction est coché sur None et j’ai ajouté crossDomain, mais le problème persiste. any clue?

5

Non désolé je ne vois pas, attention, les changements de settings Google mettent qques temps à se mettre effectivement à jour.

Quoi qu’il en soit ce n’est pas un pb spécifique à Simplicité il y a surement plein de gens qui parlent de ça (i.e. appeler les APIs Google via jQuery.ajax()) sur le net…

6

Juste un point de conception: êtes vous bien certain que cet appel à sa place coté client (en Javascript UI) ? Autrement dit, cet appel ne devrait il pas être effectué coté serveur afin d’en garantir/fiabiliser l’execution ?

Pour mémoire tout ce qui se fait coté client est, par construction, contournable/inhibable/modifiable/… par n’importe quel personne qui sait un minimum se servir des outils de dev du navigateur. Donc fiabilité/sécurité nulle.

Si ce que ça fait est une règle de gestion importante pour votre métier il faut impérativement l’implémenter, comme toute règle de gestion métier, coté serveur. Si c’est juste de la “cosmétique” ou de l’ “aide à l’UX” (genre afficher une info non persistée, une carte, etc.) vous pouvez alors le faire coté client, tout le reste c’est à faire coté serveur

7

Merci pour votre retour

8

Pour mémoire la UI responsive force certains paramètres Ajax qui sont donc ajoutés à tout appel ajax sans avoir besoin de les spécifier à chaque appel.

Par défaut cela se configure dans les Globals :

Simplicite.UI.Globals.ajaxSetup = {
  crossDomain: true,
  xhrFields: { withCredentials: true }
}

Sinon on peut aussi surcharger dans le ui.ready le $.ajaxSetup

9

De ce que j’ai pu voir sur le net, l’appel direct des APIs Google Maps via jQuery n’est pas une approche simple, il est recommandé d’utiliser la lib JS standard (cf. https://developers.google.com/maps/documentation/javascript/libraries).

Dans Simplicté cette lib peut être ajoutée correctement via un:

ui.loadScript({
	url: "https://maps.googleapis.com/maps/api/js?key=" + Simplicite.GOOGLE_API_KEY + "...",
	onload: function() {...}
});

Cela dit, la question que je pose sur la pertinence d’implémenter ce call coté client est importante, tout ce qui porte du métier doit être fait coté serveur car ce qui se fait coté navigateur n’est, par construction, ni fiable ni secure.

10

Re-bonjour,

Merci david c’est déjà résolu mais maintenant je suis face à un autre problème en fait, après l’affichage des coordonnées des places à l’aide de l’API google-place je voudrais enregistrer l’image de la place retourné par l’api dans un champ input Image pour la consulter ultérieurement mais j’arrive pas à trouver une solution.

11

Bonjour,

Si vous travaillez toujours coté client (navigateur) vous pouvez:

  • utiliser les APIs UI si vous êtes dans un composant générique de la UI responsive (ex: un formulaire d’objet métier) cf. https://www.simplicite.io/resources/documentation/04-ui/responsive.md § “Business object hooks” @Francois il faudrait ajouter un exemple explicite dans la doc qui décrive comment valoriser un champ de type document ou image depuis un byte array client
  • utiliser directement les APIs data “bas niveau” des objets métier Simplicité si vous êtes dans un composant specifique standalone qui ne soit pas déjà basé sur les APIs UI ci-dessus (sinon n’utilisez pas ces APIs car vous allez sans doute tomber dans des conflits de mise à jour si vous ne savez pas exactement comment fonctionne le moteur Simplicité), cf. https://www.simplicite.io/resources/documentation/03-apis/ajax-api.md (un exemple au § “Create record”)
12

Ok je vais faire le test en passant pas les API front (ex : “take a picture” via la webcam sur l’objet User)

13
  • Il faut créer un champ image sur son objet, visible en formulaire
  • Côté client il faut utiliser l’API getUIField qui récupère cet attribut image
  • et lui passer la structure d’un document

J’ai fait un test simple avec le contenu d’un canvas qui me permet de récupérer l’image encodée en base64 sur l’objet User :

if (window.$ui) {
	// Instance d'objet affichée à l'écran
	var user = $ui.getAjax().getBusinessObject("User", "the_ajax_User"),
		// Champ image de l'objet
		pict = $ui.getUIField($("#work"), user, "usr_image_id"),
		// image  source encodee en base64 "data:image/png;base64,..."
		data = canvas[0].toDataURL("image/png");  // ici elle provient d'un canvas
	pict.ui.val({
		id: "0", // new image
		name: "picture.png",
		mime: "image/png",
		content: data.split(",")[1] // exclude "data:image/png;base64,"
	});
}

Code à insérer/adapter lorsque vous récupérez l’image google.

14

Merci pour votre aide :)

15

  • Il faut aussi ajouter un change pour signifier que le formulaire a changé (save before close ou déclencher des contraintes Front liées à ce champ)
    pict.ui.val(...).change();

  • On a ajouté l’action UserTakePicture au socle qui peut servir d’exemple : voir le code de la ressource SCRIPT de l’objet User, on peut désormais se prendre en photo sur sa fiche Utilisateur.