Discussion :

[orphen]

Hello a tous,

je suis en plein projet de creation d'une application de citation.
J'utilise une api tres simple de https://www.citation-du-jour.fr.

L'auteur m'a fournis une url d'exemple url https://www.citation-du-jour.fr/apis...me&theme=amour.
Je ne parviens pas a déterminer quel est le type de ces donnée...

Lorsque je les recupere en $.ajax avec un jsonp j'obtient une erreur
export.php?t=theme&theme=amour&callback=jQuery3100489…_1497875071839&backgroundColor=%2…:3 Uncaught ReferenceError: background_color is not defined
at export.php?t=theme&theme=amour&callback=jQuery3100489…_1497875071839&backgroundColor=%2…:3

Pouvez vous m'aider a comprendre comment recuperer ces data?

VOici comment j'essaye de les recuperer pour le moment:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 
    <script type="text/javascript">
	$(document).ready(function(){		
		$.ajax({
			type: "POST",
			 url:"https://www.citation-du-jour.fr/apis/export.php?t=theme&theme=amour",
			 dataType: 'jsonp',
			 success:function(data){
			 alert('ok');
				 console.log('toto', data)
			 },
			 error:function(xhr){
				 //alert("Error");
				 //console.log(xhr);
			 }      
		});
	});
  </script>

Merci par avance pour votre aide

[SpaceFrog]

Tu n'envoies pas de données ?

[orphen]

Merci pour ton intérêt,
Pour le premier test les données sont envoyer directement via l'url:
https://www.citation-du-jour.fr/apis/export.php?t=theme&theme=amour

La seule valeur a changer pour faire ce dont j'ai besoin est de changer le theme.
Cependant rien qu'avec cette url j'ai une erreur Uncaught ReferenceError: background_color.

As-tu jeter un œil a l'url que j'utilise dans mon ajax?
C'est un peu zarbi non?

j'ai l'habitude de bosser sur du Json voir du XML.

Merci encore pour ton aide

[SpaceFrog]

ton ajax est en type POST ... tu en tiens compte coté serveur ? => GET .

[orphen]

Je ne gère pas la coter serveur c'est l'api d'un site que j'utilise.

En fait j'ai tester les deux avec le même résultat.

Je n'ai pas de doc concernant cet API du coup je tâtonne un peu.

La seule doc que j'ai recu c'est:

Choisir une citation aléatoire sur un thème :
https://www.citation-du-jour.fr/apis...me&theme=amour

Choisir une citation aléatoire sur un mot :
https://www.citation-du-jour.fr/apis...word=caf%C3%A9

Choisir une citation aléatoire sur un thème :
https://www.citation-du-jour.fr/apis...&author=eluard

La citation du jour :
https://www.citation-du-jour.fr/apis/export.php?t=day

Orphen

[SpaceFrog]

background_color

dans ton url tu passes background_Color

Essaye en respectant la casse ...

[orphen]

Par rapport a ce qui est renvoyé, qui est un peu zarbi le background_color ne contient pas de majuscule, j'ai testé de l'appeler avec le même résultat .
J'ai jamais autant galérer a juste avoir un success xD.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
var q="“La volonté ne peut rien sans l\'espoir. L\'amour sans l\'espoir devient une chose morte.”";
var n="Alain Grandbois";
document.write('<div style="position:relative;padding:4px;background-color:'+background_color+';border:1px solid '+border_color+';height:'+citation_height+'px;width:'+citation_width+'px;">');
document.write('<center>'+q+'<br /><br /> - '+n);
document.write('</center><sub style="bottom:4px;right:4px;position:absolute">lue sur <a href="http://www.citation-du-jour.fr" rel="nofollow">www.citation-du-jour.fr</a></sub></div>');

[orphen]

J'ai du nouveau.
En fait l'url de l'API doit etre https://www.citation-du-jour.fr/apis...eme=amour&json pour qu'on puisse recuperer du JSon.

Cependant j'ai deux soucis:

Si je fais mon appel ajax en dataType "jsonp" j'ai cette erreur qui m'indique que le datatype doit etre "text"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
		var url = "https://www.citation-du-jour.fr/apis/export.php?t=theme&theme=amour&json";
		$.ajax(url, {
			type: 'GET',
			dataType: 'jsonp',
			success: function(data) {
				console.log(data);
			},
			error: function(xhr, sts, err) {
				alert('Erreur !!');
			}
		});

Erreur: Refused to execute script from 'https://www.citation-du-jour.fr/apis/export.php?t=theme&theme=amour&json&callback=jQuery31007818445796433358_1497967358748&_=1497967358749' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Si je change le datatype en ''text"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
		var url = "https://www.citation-du-jour.fr/apis/export.php?t=theme&theme=amour&json";
		$.ajax(url, {
			type: 'GET',
			dataType: 'html',
			success: function(data) {
				console.log(data);
			},
			error: function(xhr, sts, err) {
				alert('Erreur !!');
			}
		});

J'obtient cette erreur:
XMLHttpRequest cannot load https://www.citation-du-jour.fr/apis...eme=amour&json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Voici a quoi ressemble mon response header:
Accept-Ranges:bytes
Age:0
Content-Encoding:gzip
Content-Length:615
Content-Type:text/html; charset=UTF-8
Date:Tue, 20 Jun 2017 13:52:31 GMT
Expires:Tue, 20 Jun 2017 15:52:31 GMT
Server:Apache/2.4.25
Vary:Accept-Encoding
Via:1.1 varnish-v4, 1.1 varnish-v4
X-Cache:MISS
X-Cache-Hits:0
X-Content-Type-Options:nosniff
X-FRAME-OPTIONSENY
X-XSS-Protection:1

je vais péter un plomb xD

[Watilin]

L’URL n’est pas complète. Normalement en JSONP tu passes un nom de variable, par exemple citation, pour que le serveur puisse répondre avec un bout de code commençant par citation = ….

Demande à l’auteur de l’API quelle syntaxe tu dois utiliser pour spécifier ce nom de variable.

Quant à l’en-tête Access-Control-Allow-Origin c’est également à l’auteur de l’API de la mettre sur ses réponses. Sans cet en-tête, le seul moyen pour toi de récupérer les données c’est JSONP. Vu les document.write() dans l’endpoint que tu avais au départ,



je ne suis pas certain que l’auteur soit très à jour sur les pratiques actuelles de mise en œuvre d’API, donc peut-être que tu devrais lui toucher mot de la technologie CORS, dont l’en-tête Access-Control-Allow-Origin fait partie.

[orphen]

En fait le document.write() est lié a l'url de l'api sans le parametre &json.
Il l'utilise pour permettre a ses internaute d'afficher des citations simplement sur leurs site.

De mon coter je souhaite plutôt récupérer le JSon et l'attribut jSon renvoi bien un jSon valide quand don consulte l'url.

Access-Control-Allow-Origin peut etre provoquer par le fait que mon url est file:///C:/Users/NC5476/Desktop/machine%20a%20citations/test.html ?

Merci beaucoup pour votre aide

[Watilin]

J’allais te répondre « tu dois utiliser un serveur local » mais en fait je viens de faire un test :

fichier-local.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Test CORS en fichier local</title>
</head>
<body>
 
<button>Lancer une requête</button>
 
<script> 'use strict';
 
document.querySelector('button')
  .addEventListener('click', function (event) {
    let req = new XMLHttpRequest();
    req.open('GET', 'http://localhost/tests/cors/sample.json.php');
    req.onload = function (event) {
      console.log(this.response);
    };
    req.send();
  });
 
</script>
</body>
</html>

sample.json.php

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<?php
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json; charset=utf-8');
?>{
  "pommes": 42,
  "poires": 17,
  "chocolat": true
}

Et il apparaît que, sous Chrome et Firefox au moins, on peut bel et bien faire des requêtes de file: vers http: (et bien sûr https:), dans la mesure où l’en-tête CORS est présent.

Pour répondre à ta question : non, ce n’est pas le fait que tu es en file: qui provoque ce message d’erreur à propos de Access-Control. Tu aurais eu le même en http:.

[orphen]

Okay ,

du coup faut vraiment que je lui dise d'autoriser ses header CORS si il compte laisser les gens utiliser son API.
J'ai installer le plugin allow control allow origin qui me permet de travailler sans son aide pour le moment.

J'aimerai en profiter pour vous poser une question qui n'a rien a voir mais qui me bloque chaque fois que j'utilise une API.

Ma fonction getCitation, contient l'appel a une autre fonction (connect) qui permet de se connecter a l'api et de retourner les données.
Ma fonction connect fonctionne bien seule, mais lorsque j'essaye de l'appeler au sein de ma fonction getCitation elle ne fonctionne pas (elle log l'error et non le success).

Pouvez vous me dire pourquoi cela ne fonctionne pas?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
var connect = function(url, success, error){
        $.ajax({
            url: url,
            type: "GET",
            dataType: 'json',
            success: function(response) {
                success(response)
            },
            error: function(response) {
                error(response);
            },
            cache: false
        })
    }
 
var getCitation = function(themesList, themeL){
        var randomTheme = themesList[randomNb(themeL)],
        url = 'https://www.citation-du-jour.fr/apis/export.php?json&t=theme&theme='+randomTheme;
 
        connect(url,
            function(data){
                console.log(data);
            },
            function(error){
                console.log(error)
            }
        );
    }

[Watilin]

Les deux fonction de callback success et error que tu passes à connect font exactement la même chose, il n’y a que le nom de l’argument qui change. Dans les deux cas, une « chose » sera loguée dans la console, et la nature de cette chose dépend de la réussite ou non de la requête ajax.

Recherche des indices dans l’onglet réseau de ta console.

[orphen]

J'ai finalement trouvé la solution a mon soucis.
Mon url ajax comportait majuscule et accent du coup le serveur ne me renvoyait pas mes données

[orphen]

Hello à tous,

La personne qui gère l'API viens de me dire qu'ils ont ajouter les header qui vont bien dans la page:
https://www.citation-du-jour.fr/apis/export.php

Malheureusement cela ne change rien pour moi et je ne peux toujours pas accéder à l'api sauf si je passe par le plugin navigateur Allow control allow origin.

Je suis perdu et ne sais pas comment vérifier ce qui cloche...

Pouvez vous m'aider?

Message d'erreur Chrome
XMLHttpRequest cannot load https://www.citation-du-jour.fr/apis...e&theme=nature. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Message d'erreur Firefox
Blocage d’une requête multiorigines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur https://www.citation-du-jour.fr/apis...e&theme=profit. Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant.


Merci beaucoup pour votre précieuse aide

[Watilin]

Toujours avec l’onglet réseau de la console, je vois que la page https://www.citation-du-jour.fr/apis/export.php renvoie une erreur 500. Le problème est donc du côté du serveur, et malheureusement, tu ne peux qu’attendre que l’administrateur corrige le bug et finisse de mettre en œuvre CORS correctement.