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

Ferrotype

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? – Bounteous

@Bounteous 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. – Ferrotype

@RandomKindle Hey did you ever figure out and successfully bypass this. Im also trying to access from instagram – Wristlet

@Wristlet did you guys find a solution? – Pros

Answer 1

this should fix it

helmet({
      crossOriginResourcePolicy: false,
    })

Zeeland

Can you explain this code? – Ferrotype

Refer to this thread for an explanation of why above added flag: 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. – Renascence

I should put this code in frontend or backend, I have already added res.setHeader("Access-Control-Allow-Origin", "*"); in backend – Confucian

This worked perfectly with reactjs 16+ – Orobanchaceous

This is my case, thanks. The problem from backend, not frontend – Teeter

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.

Denominative

This is not the solution for above question – Esperance

Answer 3

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

Aarau

Answer 4

You can use helemt package

const helmet = require("helmet");

app.use(
  helmet({
    crossOriginResourcePolicy: false,
  })
);

Euphorbiaceous

Answer 5

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)

Benzoyl

I can't host the image anywhere else. I get image URLs through an API from the Instagram server. Is there any other option? – Ferrotype

Actualy, you could use a proxy that would make the request for you, and get the response from this proxy. But I don't know how if there are any services like that, and the response would be twice lazy... – Benzoyl

Thank You, I with look for something like that. – Ferrotype

Answer 6

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!

Pertinent

Missing required request header. Must specify one of origin,x-requested-with Why is this showing up? – Ferrotype

Answer 7

This way can fix ERR_BLOCKED_BY_RESPONSE. (by https://mcmap.net/q/513762/-err_blocked_by_response-notsameorigin-cors-policy-javascript)

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

Provision

Answer 8

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

<video id="myVideo" crossorigin="anonymous" src="https://xxxxxx....."></video>

Emogeneemollient

Please don't add the same answer twice, Manish Rai has already posted the same hint. – Timeworn

Answer 9

Config your BE app with helmet like this! It worked for me.

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

Sister

Answer 10

Use this attribute in your img tag

crossOrigin ="anonymous" 

Adalbert