17

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">
Random Kindle
  • 400
  • 1
  • 2
  • 12
  • I don't think that's a CORS issue - CORS has to do with content retrieved using javascript (and there's no javascript in your single line of code) - why are you using a `video` tag for an image anyway? – Bravo Sep 19 '21 at 12:25
  • @Bravo I don't know the real problem, but that error pointed to CORS policy when I googled it. Sorry for the confusion, I edited the question. – Random Kindle Sep 19 '21 at 13:45
  • @RandomKindle Hey did you ever figure out and successfully bypass this. Im also trying to access from instagram – CarinaCase Oct 19 '22 at 19:24

8 Answers8

20

this should fix it

helmet({
      crossOriginResourcePolicy: false,
    })
Promise Ihunna
  • 293
  • 3
  • 8
  • 4
    Can you explain this code? – Random Kindle Apr 27 '22 at 03:52
  • Refer to this thread for an explanation of why above added flag: https://github.com/helmetjs/helmet/issues/343#issuecomment-1006259994 TLDR; In later versions of Helmet package, the flag `crossOriginResourcePolicy` has been added as true by default. – Khushal Vyas Jan 27 '23 at 13:28
  • I should put this code in frontend or backend, I have already added `res.setHeader("Access-Control-Allow-Origin", "*");` in backend – Tirath Sharma Aug 07 '23 at 07:26
17

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.

Manish Rai
  • 404
  • 3
  • 7
9

You need to set cross-origin-resource-policy: "cross-origin". If you're using helmet in your Express App. try this:

app.use(helmet.crossOriginResourcePolicy({ policy: "cross-origin" }));

For more information read any of these CORP and HelmetJS

Alfredo Bangun
  • 99
  • 1
  • 2
1

It's a CORS issue, and can only be solved server-side.

The response has the header cross-origin-resource-policy: same-origin which tells us that the resource can be accessed only by the same origin (when it's called inside a html page, using modern browsers)

You might host the image in another place to use it.

Reference: https://developer.mozilla.org/en-US/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)

Renan Felipe Ferreira
  • 318
  • 1
  • 11
1

There is a great proxy out there used just for this - bypassing a CORS block. The source code is here: https://github.com/Rob--W/cors-anywhere, and you would use it like this:

https://cors-anywhere.herokuapp.com/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 basically just adding the CORS-Anywhere URL before your actual image URL.

If you get rate limited by that website, try https://circumvent-cors.herokuapp.com/, this is one that I have deployed from the GitHub source code, no modifications and I do not think it should rate limit you.

The image you provided has expired, so if you were to give me an example of what API you were using to get the image, or another image blocked by CORS that maybe doesn't expire, I could properly test this and maybe find another answer, if this one doesn't work.

Cheers!

Pufferfishe
  • 139
  • 1
  • 7
1

This way can fix ERR_BLOCKED_BY_RESPONSE. (by https://stackoverflow.com/a/71878799/12117869)

this should fix it

helmet({ crossOriginResourcePolicy: false, }) this

BTW,if happen ERR_BLOCKED_BY_RESPONSE issue, Maybe the Reason : It's a chrome bug. It will happen on the chrome 80 - 85 version. but it was fixed on the 86 version.

[CORS] Set preflight request mode correctly

CORS preflight request mode was set to kNoCors up until now, and with cross-origin-embedder-policy: require-corp CORS preflights fail unless a CORP header is attached. Fix the bug.

same issue : https://bugs.chromium.org/p/chromium/issues/detail?id=1116990#c21

google fix commit: https://chromium.googlesource.com/chromium/src.git/+/ed257e2b7df1d3bdcd95d8687bcbd786bc48e717

felix
  • 11
  • 2
1

You can use helemt package

const helmet = require("helmet");

app.use(
  helmet({
    crossOriginResourcePolicy: false,
  })
);
Saleheen Noor
  • 261
  • 2
  • 8
1

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

<video id="myVideo" crossorigin="anonymous" src="https://xxxxxx....."></video>
Eviltomato
  • 11
  • 2