Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Imgur images returning 403

I've been making a react app and recently whenever I try to access images from imgur like so

this.setState({
  imgUrl: `https://i.imgur.com/${this.props.image.id}b.png`,
  imgBigUrl: `https://i.imgur.com/${this.props.image.id}l.png`
});

And it's being rendered like this

<img src={this.state.imgUrl}/>

But I keep getting 403 forbidden, but when I use postman or visit it in the browser it's fine. I'm also accessing the API by passing in an album url like

https://imgur.com/gallery/zrUFj

and getting all the images from there to be displayed in the app (where i get 403 errors)

I'm unsure where I could be have done something wrong, I've also tried getting a new client ID for the API authorization, still hasn't worked. Anyone have any suggestions?

like image 345
Justin Mercado Avatar asked May 10 '17 14:05

Justin Mercado


2 Answers

Note that a quick and hacky way to fix this is to simply remove the referrer header either via a <meta> tag:

<!DOCTYPE html>
<html>
<head>
  <meta name="referrer" content="no-referrer">
</head>
<body>
  ...
</body>
</html>

or in your fetch:

await fetch("https://i.imgur.com/iie9XhM.jpg", {referrer:""})

or (as mentioned by @Theblockbuster1) in the img tag:

<img src="https://i.imgur.com/iie9XhM.jpg" referrerpolicy="no-referrer">
like image 81
joe Avatar answered Nov 02 '22 12:11

joe


Imgur's CDN seems to restrict access to images from a 127.0.0.1 referer. This has been reported to them as an issue (matter of server configuration).

Meanwhile try to change your dev server host from 127.0.0.1 to localhost or maybe your real IP address.

like image 29
Sewer Orłow Avatar answered Nov 02 '22 11:11

Sewer Orłow