0
votes

La demande d'obtention de l'API ne se résout pas en javascript

Je me demande si c'est parce qu'il essaie d'accéder à deux adresses IP? Désolé s'il s'agit d'une question noob, mais lorsque j'atteins mon API, j'ai intégré le facteur ou même si je lance simplement l'URL de la demande d'obtention dans n'importe quel navigateur, les données JSON seront renvoyées. Un peu coincé quant à la raison pour laquelle cela ne résoudra pas pour moi.

const app = document.getElementById('root')

const logo = document.createElement('img')
logo.src = 'logo.png'

const container = document.createElement('div')
container.setAttribute('class', 'container')

app.appendChild(logo)
app.appendChild(container)

var request = new XMLHttpRequest()
request.open('GET', '18.220.177.84:8080/election_results?state=Ohio&year=2016&county=Cuyahoga', true)
request.onload = function () {
  // Begin accessing JSON data here
  var data = JSON.parse(this.response)
  if (request.status >= 200 && request.status < 400) {
    data.forEach((election_results) => {
      const card = document.createElement('div')
      card.setAttribute('class', 'card')

      const h1 = document.createElement('h1')
      h1.textContent = election_results.county

      const p = document.createElement('p')
      election_results.candidate = election_results.candidate.substring(0, 300)
      p.textContent = `${election_results.candidate}...`

      container.appendChild(card)
      card.appendChild(h1)
      card.appendChild(p)
    })
  } else {
    const errorMessage = document.createElement('marquee')
    errorMessage.textContent = `Gah, it's not working!`
    app.appendChild(errorMessage)
  }
}

request.send()

est-ce parce que j'utilise une requête http xml?

javascript json

2 commentaires

Donnez des informations détaillées sur votre API avec le code requis.

j'ai ajouté mon code ... désolé pour ça

3 Réponses :

0
votes

Vous êtes apparemment en train de mélanger deux adresses IP distinctes dans votre appel Postman GET.

Le premier est juste l'hôte local ( 127.0.0.1:5500 ) et le second est le serveur réel que vous essayez d'atteindre ( 18.220.177.84:8080 )

Votre appel GET ne doit atteindre que ( 18.220.177.84:8080 ) (supprimer la première partie, hôte local)

1 commentaires

voir ci-dessus .. j'ai ajouté mon extrait de code. est-ce parce que je fais une requête http?

0
votes

L'analyseur d'URL considère 18.220.177.84:8080 comme faisant partie du chemin de l'URL. Ajoutez-y // (et éventuellement un schéma comme https pour changer le protocole) pour faire savoir à l'analyseur qu'il s'agit de l' autorité ( hôte + port dans ce cas) de l'URL.

2 commentaires

cela a fonctionné! Merci! mais je reçois maintenant ce message. "Requête inter-origine bloquée: la même politique d'origine interdit la lecture de la ressource distante à 18.220.177.84:8080/… . (Raison: en-tête CORS 'Access-Control-Allow-Origin' manquant) . "

C'est un mécanisme de sécurité. Voir: developer.mozilla.org/en-US/docs/Web/HTTP/CORS

0
votes

Donc, le problème est avec votre code où vous faites une demande d'obtention à une URL sans mentionner le protocole. Utilisez HTTP ou HTTPS selon ce qui est requis avant l'URL. Donc, l'URL sera,

https://18.220.177.84:8080/election_results?state=Ohio&year=2016&county=Cuyahoga

J'espère que cela résoudra votre problème.

Venons-en maintenant à votre deuxième problème concernant l'erreur CORS. Fondamentalement, CORS ou Cross-Origin Resource Sharing est une norme qui permet à un serveur de filtrer des demandes spécifiques de cross-origin tout en rejetant d'autres. Dans votre cas, votre demande est bloquée ou rejetée par le serveur. Donc, pour résoudre ce problème,

Si vous avez accès au serveur, autorisez votre origine pour les demandes d'origine croisée effectuées à partir de votre origine. Vous pouvez le faire par les paramètres, Access-Control-Allow-Origin: <Your origin> . Par exemple, Access-Control-Allow-Origin: http://localhost:3000 . Vous pouvez mettre sur liste blanche n'importe quelle origine en spécifiant Access-Control-Allow-Origin: * , bien que je vous recommande fortement de ne pas le faire.
Vous pouvez utiliser un serveur proxy pour les demandes. Suivez ce lien pour plus d'informations.
Utilisez un plugin comme Moesif Origin & CORS Changer bien qu'il ne fonctionne que sur votre navigateur et ne peut être utilisé que pour le développement. (Non recommandé)

0 commentaires