0

He estado intentando recoger informacion usando XMLHttpRequest, para coger un JSON de una API Rest, imprime en consola el JSON pero no logro sacar esa info por HTML en mi web, necesito un contador de descargas de un programa.

Ej: Descargas: x

Pero por alguna razon no puedo sacar la información en la web... Uso Apache2/VSCode/Chrome/XAMPP, por si ayuda, aquí está el código:

JSON

{
    "id": "78993",
    "title": "PermaDeathCore",
    "tag": "Permadeath HardCore Mode",
    "current_version": "PDC",
    "author": {
        "id": "973464",
        "username": "vo1d_dev"
    },
    "premium": {
        "price": "0.00",
        "currency": ""
    },
    "stats": {
        "downloads": "12",
        "updates": "0",
        "reviews": "0",
        "rating": "0"
    }
}

function JSONRequest(){
    
    let XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
    let request = new XMLHttpRequest();
    request.open('GET', 'https://api.spigotmc.org/simple/0.1/index.php?action=getResource&id=78993');
    request.send();
    request.onload = () => {
    let JSONFile = JSON.parse(request.responseText);
    let downloads = JSON.parse(JSONFile.stats.downloads);
    document.getElementById("output").innerHTML = downloads;
    }
}

JSONRequest();
<html>
    <head>
        <meta charset="UTF-8">
        <script src="/src/script.js"></script>
    </head>
    <body onload="JSONRequest()">
        <strong>Downloads: <span id="output"></span></strong>
    </body>
    <script src="/src/script.js"></script>
</html>

1
  • 4
    Hi there! You are in the Spanish version. Please translate it or consider to move it to Stackoverflow.com (English version) Thanks!
    – fredyfx
    Commented el 19 may. 2020 a las 4:53

1 respuesta 1

1

primero que todo... ¿Estás completamente seguro de que recibes un JSON y lo muestras por consola?

Recuerda que la sentencia require hace parte de los modulos de nodejs y no de javascript puro, es decir que en javascript puro no existe.

De todas maneras hay algo que me parece extraño... y es esta parte de aqui:

let XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
let request = new XMLHttpRequest();

Porque intentas requerir un modulo?, hay que entender algo, XMLHttpRequest es nativo de javascript, por lo cual no requieres de instalar ni requerir modulos externos para obtener un XMLHttpRequest, mira este ejemplo sin usar require:

const ajax = new XMLHttpRequest();
console.log(ajax);

Como vemos existe nativamente sin importar ningun modulo o instalar alguno, de todas maneras aunque intentaras usar la version del modulo XMLHttpRequest que tienes, estas importandola en una parte erronea.

Los modulos e importaciones de recursos externos... NUNCA se importan después del inicio del documento.

Si intentas importarlos en una parte distinta definitivamente te va a dar errores. Por ejemplo:

MAL:

//Inicio del documento

//Inicio del codigo
function JSONRequest(){
                         //Mal uso de require, fallara.
    let XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;

}

BIEN:

//Inicio del documento
let XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest; 

//Inicio del codigo
function JSONRequest(){
    ...
}

Ahora bien, respecto a la pregunta original del como puedes mostrar esta data en tu elemento, primero hare la misma pregunta del inicio...

¿Estas seguro de que recibes un JSON como respuesta?

Existe un problema, un problema que no puedes resolver tu, ni yo ni ninguno de nosotros, y es que tienes problemas de origenes cruzados o como se le dice en ingles Cross-Origins.

Las CORS o cabeceras de origenes cruzados son una medida de seguridad tomada por los recursos de las paginas web las cuales le indican a la pagina aquellos usuarios o dominios los cuales podran acceder o no a los recursos, de esta manera se previene que cualquier persona intente acceder a un recurso no autorizado solamente haciendo uso de peticiones HTTP.

Desactivar las CORS es absurdamente sencillo, pero el inconveniente es no tener nosotros el acceso a ese archivo para añadir esa cabecera de acceso... en pocas palabras:

  • Si no eres dueño del recurso y no añades esa cabecera (Access-Control-Allow-Origin) al archivo no vas a poder acceder a el de ninguna manera hagas lo que hagas.

Aun hay opciones... como buscar otras APIS que tengan acceso publico (Access-Control-Allow-Origin: *) o en caso de que seas el propietario de la API, simplemente añadir esta cabecera en el documento del lado del servidor.

Pero por el momento, a no ser de que la API te de acceso especial (por ejemplo una API KEY que puedas enviar junto con la peticion), no hay manera de desactivar esas CORS del lado del servidor.

El motivo de mi pregunta es porque, aunque yo pueda abrir directamente el archivo y ver el JSON desde aquí:

enlace API

Esto no es lo mismo que tratar de obtener esta información en un sitio web diferente (petición HTTP o XHTTP hacia ese archivo).

La razon por la que todos podemos ver el JSON si vamos directamente a ese link, es porque esa URL se encuentra en el mismo dominio (hoisted by the same site).

Mientras que nuestro sitio se encuentra obviamente en un dominio diferente (not hoisted by the same site), asi que cuando intentamos obtener esta información en tu archivo dara problemas de origenes cruzados, CORS.

Soluciones posibles:

  • Buscar otra API pero que tenga acceso publico.
  • Si eres propietario de la API añadir esta cabecera para tu dominio o hacer de ese archivo un recurso publico.

He confirmado que se trata de CORS, puesto que al intentar hacer fetch en vez de XMLHttpRequest también se obtiene el mismo problema (CORS):

fetch("https://api.spigotmc.org/simple/0.1/index.php?action=getResource&id=78993")
.then(res =>{
  res.json();
})
.then(r =>{
  console.log(r);
})
.catch(e =>{
  console.error(e);
})

Se que no se ve que sea explicitamente las CORS, pero cuando intentamos esto desde otra cosa que no sea este snippet, aparece la parte del error de CORS.

De todas maneras, aunque nosotros no podamos solucionar directamente este error de CORS, he decidido organizar y corregir un poco tu codigo en lo posible, por si de algo te ayuda:

window.onload = ()=>{

  function JSONRequest(){
    
      let request = new XMLHttpRequest();
      
      request.onload = () => {
        let JSONFile = JSON.parse(request.responseText);
        let downloads = JSONFile.stats.downloads;
        document.getElementById("output").innerHTML = downloads;
      }
      
      request.onerror = e =>{
        console.error(e);
      }
      
      request.open('GET', 'https://api.spigotmc.org/simple/0.1/index.php?action=getResource&id=78993');
      request.send();
      
  }

  JSONRequest();

}
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <strong>Downloads: <span id="output"></span></strong>
    </body>
</html>

1
  • De hecho si vas al enlace del JSON en el apartado Cabeceras podras ver que efectivamente falta la cabecera Access-Control-Allow-Origin.
    – Layer
    Commented el 19 may. 2020 a las 20:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.