La demande Ajax échoue, je ne vois pas pourquoi

Question

J'ai créé une API qui renvoie des données en json, et maintenant je crée une application pour tester l'API en recevant les données et en les utilisant sur la page. Cependant, mon code ajax (voir ci-dessous) échoue pour une raison quelconque, et l'erreur dit juste "erreur" (Error : error).

Qu'est-ce qui peut être faux dans ce code ?

le code :

    $.ajaxSetup ({
      url: "http://localhost:8000/products", // <--- returns json
      type: "GET",
      headers:{
        "Accept":"application/json",
        "Content-type":"application/x-www-form-urlencoded"
      }
    })
    $.ajax({
        success: function(data){
            console.log("You made it!");
        },
        error: function(xhr) {
           console.log("Error: " + xhr.statusText);
       }
    }).done(function(data){
        console.log(data);
    })

Voici les informations que j'obtiens dans Chrome (Inspecteur -> Réseau) :

Nom : produits localhost/, Méthode : GET, Statut : (annulé), Type : En attente, Initiateur : jquery-latest.js:8434 script, Taille : 13B 0B, C'est l'heure : 95ms 0.0 jours

Answer 1

Ce qui est probablement le problème

Je pense que je connais votre problème ici. Apparemment, vous chargez une page d'un certain protocole+domaine+port (par exemple, " http://localhost/ "), mais invoque ensuite une requête AJAX vers un protocole, un domaine ou un port différent (dans ce cas, seul le port diffère probablement : " http://localhost:8000/products" ).

De cette façon, vous êtes probablement en train de frapper Politique de l'origine identique qui est une fonction de sécurité de votre navigateur. Dans ce cas, les navigateurs peuvent indiquer que la demande spécifique a été "annulée" (parce que le navigateur l'a bloquée).

Solution

Il existe de multiples solutions à votre problème :

• (le plus simple) s'en tenir au même protocole+domaine+port pour le site d'origine et le point de terminaison demandé par AJAX,
• (deuxième plus facile) construire un point final sur le serveur, donc par exemple " http://localhost/products " va appeler " http://localhost:8000/products "en arrière-plan et renverra sa réponse (comme une marche à suivre pour le SOP),
• des solutions plus complexes comme JSONP, CORS etc. (plus d'informations ici : https://stackoverflow.com/a/8467697/548696 ),

Answer 2

$.ajax({
    /* ajax options omitted */
    error: function (xmlHttpRequest, textStatus, errorThrown) {
         if(xmlHttpRequest.readyState == 0 || xmlHttpRequest.status == 0) 
              return;  // it's not really an error
         else
              // Do normal error handling
});

Answer 3

Essayez d'utiliser seulement

$.ajax({
  url: "http://localhost:8000/products", 
  dataType: 'json',
  success: function(data){
            console.log("You made it!");
        },
        error: function(xhr) {
           console.log("Error: " + xhr.statusText);
       }
});

Au lieu d'utiliser le callback done, vous pouvez utiliser une ligne de code dans le callback success ou complete. C'est assez simple et plus propre.

Answer 4

Pourquoi n'essayez-vous pas de fusionner les deux appels ajax en un seul ? type = "POST"

$.ajax({
    type: "POST",
    url: "http://localhost:8000/products",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(data){alert(data);},
    error: function(errMsg) {
        alert(errMsg);
    }
});

Answer 5

Je pense que votre navigateur a mis en cache l'erreur, ou peut-être qu'il y a des problèmes pour configurer les en-têtes correctement, alors essayez d'ajouter ce chemin là-bas dans la section $.ajaxsetup() :

    $.ajaxSetup ({
      url: "http://localhost:8000/products", // <--- returns json
      type: "GET",
      dataType: 'json',
      cache: false,
      contentType: "application/json"
    });

Essayez cette méthode une fois et voyez si elle fonctionne.