1

Antecedente

Deseo evaluar la disponibilidad de algunos recursos como imágenes y vídeos a través de peticiones fetch usando el verbo HEAD de la siguiente forma:

const sources = [
    'https://imagen1.jpg',
    'https://imagen2.jpg',
    'https://imagen3.jpg',
]

const checkAvailability = async (url) => {
    try {
        console.log(url)
        const res = await fetch(url, { method: 'HEAD', mode: 'no-cors' })

        // { Validar estado de respuesta }

        return true
    } catch (err) {
        return false
    }
}

const checkUrls = (urls) => {
    const promises = urls.map(async (url) => {
        return await checkAvailability(url)
    })
    return promises
}

const checkSources = async (sources) => {
    for await (available of checkUrls(sources)) {
        console.log(available)
    }
}

checkUrls(sources)

Problemática

En caso tal de que el recurso no este disponible, obtendré una respuesta con un status 404, el cual no es bien manejado por mi bloque try catch, entiendo bien que fetch solo rechaza la petición interna que realiza en caso de un error de red, sin embargo no logro manejar correctamente la respuesta obtenida, esto debido a que muchos de los recursos se encuentran alojados en servidores que no tienen habilitado CORS, y por eso lo máximo que obtengo es una respuesta opaca.

Agradezco de antemano si alguien me pudiera ofrecer una solución.

12
  • Esta respuesta me parece interesante para tu caso. fetch falla únicamente cuando hay un error de red, en cambio, los errores como 404, 500 y otros, son considerados exitosos desde el punto de vista de fetch. Se puede evaluar por tanto status` con algo así: if (response.status !== 200) { //hacer que la promesa sea rechzada haciendo que la promesa sea rechazada. Puedes ver también este hilo de github con varias propuestas de manejadores de error completos.
    – A. Cedano
    el 24 mar. 2019 a las 18:52
  • es cierto lo que dices, la cuestión en que como solo puedo obtener una respuesta opaca, el valor status siempre sera 0 el 24 mar. 2019 a las 18:57
  • No sé a qué te refieres con respuesta opaca ...¿? ¿Si haces un console.log(res); no encuentras allí elementos que informen sobre el tipo de error que vino del servidor? ¿El código de servidor es responsabilidad tuya? De ser así, podrías también trabajar del lado del servidor, para determinar el tipo de respuesta y devolverlo a la petición que haces con fetch
    – A. Cedano
    el 24 mar. 2019 a las 18:59
  • es un tipo de respuesta que se obtiene de las peticiones tipo no-cors, existen otros tipos de respuestas como las indicadas aqui, sin embargo en este caso especifico la respuesta no me retorna nada en absoluto, por ello lo que deseo es poder manejar dichos errores y que ingrese por el bloque del catch, sin embargo no entiendo como hacerlo ya que parece que el error se ejecuta en un scope que no puedo manejar el 24 mar. 2019 a las 19:27
  • Ok, leyendo el enlace, las respuestas del tipo opaque se deben a que estás usando el mode: 'no-cors', por tanto, a no ser que cambies a mode: 'cors' o que no pongas nada (valor por defecto), no podrás obtener datos de la respuesta. La especificación dice que las respuestas opacas no traen datos, son severamente restrictivas. Si estás obligado a usar no-cors, entonces no te quedará otra que trabajar el código del servidor, verificar lo que ocurre en él y devolver un contenido adecuado.
    – A. Cedano
    el 24 mar. 2019 a las 19:35

1 respuesta 1

0

Tras una evaluación e investigación de la forma en que se estructura la seguridad del navegador para realizar peticiones a orígenes que no permiten su consulta desde orígenes distintos he concluido que no es posible obtener una respuesta valida haciendo uso de fetch o un XMLHttpRequest no por el funcionamiento de ellos, sino mas bien por el sistema de seguridad de los navegadores web en si.

Dejo este link de la web de desarrolladores de Google para cualquiera que desee investigar un poco frente al tema.

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.