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

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...?

user_12160420 · Answer

this should fix it

helmet({
      crossOriginResourcePolicy: false,
    })

user_18141360 · Answer

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:

this should resolve the error.

user_19323815 · Answer

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

user_12894733 · Answer

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)

user_18758797 · Answer

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!

user_12117869 · Answer

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

ERR_BLOCKED_BY_RESPONSE.NotSameOrigin CORS Policy JavaScript

6 Answers