Imgur images returning 403

Asked 10/5, 2017 at 14:28 Answered 26/4, 2021 at 16:7

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?

Gilpin answered 10/5, 2017 at 14:28 Comment(0)

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.

Programmer answered 11/5, 2017 at 8:33 Comment(5)

This worked for me. Thanks! If you don't mind me asking, where did you find this out? I've been searching for a while now and I haven't stumbled upon that info yet – Gilpin 11/5, 2017 at 12:40

Glad to hear that. I came across the same issue recently. Simply investigated the response headers in both cases and tried the approach. Notice that you will have the same issue with the app on production build. Just serve it on your IP address not localhost. – Pino 11/5, 2017 at 15:21

Imgur just wrote to me that they fixed the issue on their end. You may use localhost again. – Pino 11/5, 2017 at 21:16

For me the issue is the exact opposite, 127.0.0.1 doesn't work while localhost does – Emerick 24/8, 2018 at 17:55

I updated the answer just now to reflect the actual case now, i.e, 127.0.0.1 doesn't work while localhost does. – Billings 18/9, 2020 at 22:18

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

Relations answered 26/4, 2021 at 16:7 Comment(2)

Thanks! Also, <img src="" referrerpolicy="no-referrer"> worked for me :) – Haya 25/6, 2021 at 13:16

This should also be the answer :) – Particle 3/2 at 1:51

Recommended topics

Hot tags