"fetch: api to website"

Résolu/Fermé
Warren37 Messages postés 40 Date d'inscription vendredi 10 juin 2022 Statut Membre Dernière intervention 25 septembre 2023 - Modifié le 13 juin 2022 à 12:11
Warren37 Messages postés 40 Date d'inscription vendredi 10 juin 2022 Statut Membre Dernière intervention 25 septembre 2023 - 13 juin 2022 à 21:12
Bonjour, je souhaite récupérer une donnée api

J'ai regardé ce tuto

https://www.youtube.com/watch?v=2lt4HmLm8LE&ab_channel=NadfriJS

Mais Rien ne s'affiche côté Web.

Merci d'avance


HTML: 
<input type="text" placeholder="Score">
         <button id="btn">GET Info</button>
         <div id="output"></div>


Javascript: 
var myHeaders = new Headers();
myHeaders.append("Authorization", "Bearer tokenIci");

var requestOptions = {
  method: 'GET',
  headers: myHeaders,
  redirect: 'follow'
};

btn.onclick= () =>{
  fetch("lienApiIci", requestOptions)
  .then(response => response.json())
  .then(data => {
    output.textcontent = "";
    output.textcontent = 'Compte de ${data.clanTag.clanScore}';
  })
  .catch(error => console.log('error', error));
}




Configuration: Configuration: Windows / Firefox 101.0

8 réponses

Réponse 1 / 8
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 526
13 juin 2022 à 18:09
Il ne semble pas possible d'utiliser l'API de clashroyale.com via du JavaScript dans un navigateur (coté client) à cause du mécanisme CORS (Cross-origin resource sharing), essaye si possible d'utiliser un script coté serveur.
Un exemple avec PHP : https://pastebin.com/2Af68dv5
1
Réponse 2 / 8
Warren37 Messages postés 40 Date d'inscription vendredi 10 juin 2022 Statut Membre Dernière intervention 25 septembre 2023 3
Modifié le 13 juin 2022 à 21:18
Merci. Génial! Pitet vous êtes un chef! J'ai configuré avec xampp. Je reçois les données dans ma page indexhtml.php

Je vais essayer d'isoler une donnée avant de cloturer la discussion
1
Réponse 3 / 8
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 526
13 juin 2022 à 12:11
Bonjour,

Quel est le message d'erreur affiché dans la console ?

Si besoin, essaye de l'afficher comme ceci : 
    .catch(error => console.log('error', error.message));
0
Réponse 4 / 8
Warren37 Messages postés 40 Date d'inscription vendredi 10 juin 2022 Statut Membre Dernière intervention 25 septembre 2023 3
13 juin 2022 à 12:38
J'ai ceci: 

TypeError: i is undefined
util.js:56
ReferenceError: $ is not defined
script.js?ver=18:110
error
NetworkError when attempting to fetch resource.
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 526
Modifié le 13 juin 2022 à 12:44
Les premiers message d'erreur ne correspondent pas au code de ton premier message (pas de variable i dans ton code, ni d'utilisation de $). Un problème/oubli de chargement pour jQuery ?
Commence par corriger les autres erreurs de ton script.

Tu as bien modifier le lien de l'API dans ton code ("lienApiIci") ? Quel est le status code dans l'onglet réseau des outils de développement du navigateur pour ce lien (404 ou autre) ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 8
Warren37 Messages postés 40 Date d'inscription vendredi 10 juin 2022 Statut Membre Dernière intervention 25 septembre 2023 3
Modifié le 13 juin 2022 à 14:13
Autant pour moi ces erreurs venaient d'ailleurs et je les ai corrigé.

Quand je clique sur le bouton "Get info" ça parcours mon fichier javascript index.js et ça me met: 

error
NetworkError when attempting to fetch resource.


Quand je coupe le debug, j'ai la requête OPTION au code 200 et GET de mon api à 403



Et dans le <head></head> j'ai: 


<script src="jquery-3.6.0.min.js"></script>
<script src="index.js" defer></script>


A la base, j'ai pris la requête généré sous postman du fetch javascript puis je l'ai modifié avec le tuto.

J'ai remplacé le lienApiIci et le Token oui
0
Réponse 6 / 8
Warren37 Messages postés 40 Date d'inscription vendredi 10 juin 2022 Statut Membre Dernière intervention 25 septembre 2023 3
Modifié le 13 juin 2022 à 14:33
Maintenant le code Get me renvoie 400 ou 403 suivant ce que je fais
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 526
13 juin 2022 à 14:48
Le status code 400 indique que le requête n'est pas correcte (syntaxe ou contenu invalide). 403 indique un problème d'autorisation. Le token passé dans l'entête est correcte ?
C'est pour utiliser quelle API (Clash of Clan à priori) ? Essaye de consulter la documentation de l'API, tu devrais y trouver plus d'infos.
0
Réponse 7 / 8
Warren37 Messages postés 40 Date d'inscription vendredi 10 juin 2022 Statut Membre Dernière intervention 25 septembre 2023 3
Modifié le 13 juin 2022 à 15:40
J"essaye de récupérer un get clanTag mais toujours cette erreur 400

"Le client fournit des paramètres incorrecte pour la requête."


https://developer.clashroyale.com/#/documentation
0
Réponse 8 / 8
Warren37 Messages postés 40 Date d'inscription vendredi 10 juin 2022 Statut Membre Dernière intervention 25 septembre 2023 3
Modifié le 13 juin 2022 à 17:25
Dans réseau quand je clique sur le fichier .js où il y a le code 400 et j'ai: 

btn.onclick

(Asynchrone : EventHandlerNonNull)
0

Discussions similaires

Différence entre fetch et fetchAll en PDO
playboy-1990 -
zzz -

3 réponses
l'opération courante "courrier entrant" n'as pas aboutie le serveur de
Patrick -
Patrick -

8 réponses
Problème fetch et addEventListener, impossible faire console.log
Lukas1980 -
Lukas1980 -

7 réponses
Call to a member function fetch() on bool,
joseph -
prosperekot -

7 réponses
Code erreur: Fatal error: Call to a member function fetch()
flo39400 -
flo39400 -

4 réponses