0

Estoy creando una página de index que implementa con string y thymeleaf una API de google para generar una seccion de noticias. El problema viene cuando utilizo el JavaScript para generarlos, ya que en la consola de chrome me tira dos errores:

Error del codigo en chrome

La incongruencia esta en que si lo ejecuto en visual code con LiveServer sí que funciona, pero en el servidor no.

Aquí dejo el código del html sobre el que actua el script:

<!DOCTYPE html>
<html lang="en">
<head th:insert="librerias::librerias">
<link rel="stylesheet" th:href="@{aparte/css/bootstrap.min.css}">
<link rel="stylesheet" href="/src/main/resources/static/css/API.css">

</head>

<body>

    <div th:insert="top"></div>
    
    <h1>Cosas</h1>

</body>
<script th:src="@{/src/main/resources/static/js/scriptAPI.js}"></script>

El propio script que la aplicacion parece no encontrar:

let body=document.querySelectorAll("body")[0]
let articleDiv=document.createElement("div")
articleDiv.setAttribute("id","news")
fetch("https://newsapi.org/v2/everything?q=DGT&apiKey=MIAPI")
  .then(response => response.json())
  .then(data => {
    data.articles.forEach(article => {
      let articleItem=document.createElement("div")
      articleItem.setAttribute("class","card article")
      let articleImg=document.createElement("img")
      articleImg.setAttribute("src",article.urlToImage)
      let articleContent=document.createElement("div")
      articleContent.setAttribute("class","articleContent")
      let articleHeader=document.createElement("h2")
      let linkHeader=document.createElement("a")
      linkHeader.setAttribute("href",article.url)
      linkHeader.textContent=article.title
      articleHeader.appendChild(linkHeader)
      let articleText=document.createElement("p")
      articleText.setAttribute("class","lead")
      articleText.textContent=article.description
      articleItem.appendChild(articleImg)
        articleContent.appendChild(articleHeader)
        articleContent.appendChild(articleText)
      articleItem.appendChild(articleContent)
      articleItem.style.marginTop="5px"
      articleDiv.appendChild(articleItem)
    });
    body.appendChild(articleDiv)
  })
  .catch(error => {
    console.error(error);
  });

Y una imagen de las rutas de los archivos, aunque dudo que sea el problema:

introducir la descripción de la imagen aquí

3
  • Ya que el proyecto en sí es grande no puedo realizar un ejemplo minimo verificable pero en caso de ser necesario os puedo enviar mi repositorio
    – Redox
    Commented el 6 feb. 2023 a las 10:31
  • El fichero lo está encontrando, pero por algún motivo está respondiendo que es un fichero JSON (mediante el MIME type) y por tanto el navegador se niega a ejecutarlo Commented el 6 feb. 2023 a las 11:42
  • Todo lo contrario, el fichero NO lo está encontrando, ya que el primer error que aparece en la consola es un 404 sobre el mismo fichero. ¿Qué ocurre si abres el fichero localhost:8095/src/main/resources/static/css/API.css en el navegador? ¿Puedes ver su contenido?
    – Zito_MA
    Commented el 9 feb. 2023 a las 9:04

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.