Sé que preguntas como esa ya se han hecho muchas veces, pero aún no pude encontrar una solución o incluso una explicación para eso.
Trabajo en un proyecto que necesita la mejor resolución posible en las miniaturas de YouTube. Usé la siguiente URL https://i.ytimg.com/vi/VIDEOID/maxresdefault.jpg , sin embargo, descubrí que en raras ocasiones esto no funciona y obtengo una imagen de marcador de posición y un estado de 404, atrás. En ese caso, me gustaría usar https://i.ytimg.com/vi/VIDEOID/hqdefault.jpg .
Para verificar si existe una imagen, traté de hacer una solicitud de búsqueda usando JavaScript:
const url = "https://i.ytimg.com/vi/VIDEOID/hqdefault.jpg" fetch(url).then(res => console.log(res.status)) Pero recibo un error que indica que falta el CORS-Header 'Access-Control-Allow-Origin'. Intenté configurarlo y varios otros encabezados que encontré, pero fue en vano. Solo funciona si envío la solicitud en modo no cors, pero el estado siempre es 0 y parece que también faltan todos los demás datos.
También probé la solicitud en Postman donde funcionó e incluso copié el JavaScript-Fetch-Snipped que Postman me dio:
var requestOptions = { method: 'GET', redirect: 'follow' }; fetch("https://i.ytimg.com/vi/VIDEOID/maxresdefault.jpg", requestOptions) .then(response => response.text()) .then(result => console.log(result)) .catch(error => console.log('error', error)); Leí que este es un problema del servidor y Youtube lo está restringiendo, pero ¿por qué funciona en Postman y por qué funciona cuando se usa <cfhttp> en ColdFusion? Además, el código de estado incluso aparece en la consola dentro del mensaje CORS-Error...
¿Por qué? explicado:
La política CORS se implementa en los navegadores para permitir compartir recursos entre sitios web y evitar que los sitios web se ataquen entre sí:
Estas políticas solo se aplican dentro de un navegador. Presumiblemente, Postman y Coldfusion funcionan porque realizan solicitudes HTTP directas fuera del contexto de un script de navegador. Lo que lleva a cómo solucionar las restricciones de CORS...
Soluciones:
3 formas de corregir el error de CORS y cómo funciona el encabezado Access-Control-Allow-Origin explica cómo eludir las restricciones de CORS. Todos funcionan manipulando los encabezados/origen de la solicitud:
Siendo realistas, la opción #3 es la única solución real. Los puntos finales de SvelteKit hacen que sea súper simple enviar solicitudes de proxy.
El siguiente código funciona correctamente para mí y siempre obtengo el estado 200 ok Se puede hacer una implementación similar
//import fetch from 'node-fetch'; const fetch = require('node-fetch'); loaddata(); async function loaddata(){ var Headers="{headers: {'Access-Control-Allow-Origin': '*'}"; var requestOptions = { method: 'GET', redirect: 'follow', }; const response = await fetch('https://i.ytimg.com/vi/9DCwyuH29SI/hqdefault.jpg',requestOptions,Headers); console.log(response); }