ERR_BLOCKED_BY_RESPONSE.NotSameOrigin CORS Policy JavaScript

Question

This is the image URL I got from an api

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

this is my 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">

I see the image when I go to the URL, directly through the browser. But it is not showing up on my website

When I checked the Debug Console I get this error.

Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE.NotSameOrigin

when I googled this the problem might be due to some CORS Policy issue.

How to load this image on my website without messing with the policy and stuff...?

<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">

Answer 1

this should fix it

helmet({
      crossOriginResourcePolicy: false,
    })

Answer 2

I was getting the same error while fetching images from different api.

I fixed the error by adding crossorigin="anonymous" in image tag.

Just add crossorigin="anonymous" in your img tag like:

<img crossorigin="anonymous" src="https://example.com/image.jpg">

this should resolve the error.