0

estoy consumiendo información de la siguiente url: https://docs.microsoft.com/api/learn/catalog/

El día de ayer que la estuve configurando los datos se mostraban correctamente, pero hoy cada ves que checo en consola me sale el mensaje:

"Solicitud desde otro origen bloqueada: la política de mismo origen impide leer el recurso remoto en https://docs.microsoft.com/api/learn/catalog/ (razón: falta la cabecera CORS 'Access-Control-Allow-Origin')."

he agregado la siguiente línea para resolverlo pero ahora no me arroja ninguna resultado

 fetch('https://docs.microsoft.com/api/learn/catalog/',{ method: 'GET',
    headers: {
      'Acces-Control-Allow-Origin: *',
      'Acces-Control-Allow-Credentials: true'
    },
  })

Muestro mi código Original:

  <div id='elem'> </div>

  <script>
   const $test = document.querySelector('#test')
  
  fetch("https://docs.microsoft.com/api/learn/catalog/",{method:"GET"})

  .then(response => response.json())
  .then(data  => {
    
    
  let element = document.getElementById('elem')
  element.innerHTML = `
  <div class="card card-1">
  <img src='${data.modules[1].icon_url}'/>
  <h4><a href="${data.modules[1].url}">${data.modules[1].summary}</a></h4>
  <span class="badge badge--info badge--small">${data.modules[1].levels}</span>
  <span class="badge badge--info badge--small"> ${data.modules[1].roles}</span>
  <span class="badge badge--info badge--small">${data.modules[1].products}</span><br><br>
 
  <p class="font">Duración: ${data.modules[1].duration_in_minutes} minutos</p>
  <p class="font">${data.modules[1].title}</p>
  </div>
 
  `;
  
  


  console.log(data)


  })
</script>

Estoy tratando de la siguiente forma en modo Cors, no se si lo este haciendo de la manera correcta, pero me sigue saliendo el mismo mensaje de error:

     <script>
    document.getElementById('jsonBtn').addEventListener('click', cargarJSON);

const uri = 'https://docs.microsoft.com/api/learn/catalog/';
let h = new Headers();
h.append('Accept','application/json');

let req = new Request (uri,{
  method: 'GET',
  headers: h,
  mode: 'cors'
})

    function cargarJSON(){
       fetch(req)
      .then(function(res){
        return res.json();
      })
      .then (function(data){
        console.log(data);
      })
    }


  </script>

Después de seguir investigando pude solucionarlo añandiendo esta URL en el fetch

fetch('https://docs.microsoft.com/api/learn/catalog/?locale=es-es')
1
  • Los encabezados (headers) son configurados y enviados por el servidor, no por el cliente, en lugar de headers: { ... } intenta con mode: 'cors'. Referencia: modo de petición
    – Triby
    el 10 sep. 2020 a las 15:46

1 respuesta 1

-1

Yo le he solucionado, no en la parte del cliente, sino en la parte del servidor, el servidor de donde solicitas la informacion, debe de tener a tu dominio o IP en SU Acces-Control-Allow-Origin.

1
  • Tu respuesta, aunque OK, es insuficiente para realizar los cambios necesarios en programas y/o archivos de configuración.
    – Candid Moe
    el 10 sep. 2020 a las 20:21

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