Esta es la URL de la imagen que obtuve de una API
este es mi html
<img src="https://scontent-jnb1-1.cdninstagram.com/v/t51.2885-15/e15/242204298_1728375270686500_5634415857798350440_n.jpg?_nc_ht=scontent-jnb1-1.cdninstagram.com&_nc_cat=104&_nc_ohc=3O8LpuGJsdUAX_E1Dxz&edm=AHlfZHwBAAAA&ccb=7-4&oh=0a22779e81f47ddb84155f98f6f5f75f&oe=6148F26D&_nc_sid=21929d">Veo la imagen cuando voy a la URL, directamente a través del navegador. Pero no aparece en mi sitio web.
Cuando verifiqué la consola de depuración, aparece este error.
Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE.NotSameOrigincuando busqué en Google esto, el problema podría deberse a algún problema de política CORS.
¿Cómo cargar esta imagen en mi sitio web sin alterar la política y esas cosas...?
<img src="https://scontent-jnb1-1.cdninstagram.com/v/t51.2885-15/e15/242204298_1728375270686500_5634415857798350440_n.jpg?_nc_ht=scontent-jnb1-1.cdninstagram.com&_nc_cat=104&_nc_ohc=3O8LpuGJsdUAX_E1Dxz&edm=AHlfZHwBAAAA&ccb=7-4&oh=0a22779e81f47ddb84155f98f6f5f75f&oe=6148F26D&_nc_sid=21929d">esto debería arreglarlo
helmet({ crossOriginResourcePolicy: false, })Recibía el mismo error al obtener imágenes de diferentes api.
Solucioné el error agregando crossorigin="anonymous" en la etiqueta de la imagen.
Simplemente agregue crossorigin="anonymous" en su etiqueta img como:
<img crossorigin="anonymous" src="https://example.com/image.jpg">esto debería resolver el error.
Es un problema de CORS y solo se puede resolver del lado del servidor.
La respuesta tiene el encabezado cross-origin-resource-policy: same-origin que nos dice que solo se puede acceder al recurso desde el mismo origen (cuando se llama dentro de una página html, usando navegadores modernos)
Puede alojar la imagen en otro lugar para usarla.
Referencia: https://developer.mozilla.org/en-US/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)