CODEWITHSUNDEEP
javascriptcross-origin-read-blocking
frz
frz

Reputation: 21

Cannot see my image because = CORB blocked cross-origin response

Hi i have a little problem, i use the GIPHY-api to get GIFS (obviously) and when i get the url of the Gifs i need, i put them into my img src element. But CORB seems blocking the url for some reason

when i console.log the data.data[0].url i get this url = https://giphy.com/gifs/soulpancake-funny-kid-president-kidpresident-rgk1DxSugZDFu

here's the code :

function verwerkData(data) {
    gifContainer.innerHTML += `<img src="${data.data[0].url}" title="${data.data[0].title}"/>`;
}

The error = Cross-Origin Read Blocking (CORB) blocked cross-origin response https://giphy.com/gifs/soulpancake-funny-kid-president-kidpresident-rgk1DxSugZDFu with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

Upvotes: 0

Views: 11565

Answers (2)

Ximaz
Ximaz

Reputation: 316

As Quentin mentioned it before, you have to find the image URL, not the page URL containing the image URL. You have two options. First, go by yourself, if it's not a dynamic web page, on the Giphy page, and search by yourself the image : https://i.sstatic.net/hx8SN.gif.

Else, using XHR or a backend request, perform a regex on the response content to extract the image. For the example :

const regex = /https:\/\/.*giphy.*\/media\/\w+\/giphy.gif\?cid=[a-f0-9]+&rid=giphy\.gif&ct=g/gi

Upvotes: 1

Quentin
Quentin

Reputation: 943556

The src attribute for an <img> has to contain the URL to an image

It doesn't make sense to put the URL to an HTML document there.

The error message essentially says "This is an HTML document, that can't be right, I'm blocking it".

Upvotes: 1

Related Questions