Instagram CORS policy blocking requests about react-instagram-embed

[NvdB31]

I think it's failing because of changes on Instagram's side. (They are now omitting the 'Access-control-allow-origin' in their response)

I've opened a bug report with Facebook to see if this is actually an intended change.

[mwadden]

Hey all... it just started working again for me. The jsfiddle shared above (https://jsfiddle.net/rcfdb7w0/) is working now too. Hopefully it stays working. 🤞

[zebroid]

fucking instagram with it's constant changes...

i solved this problem by server-side script in the middle
so, instead of request to https://api.instagram.com/oembed/?omitscript=true&url=https://www.instagram.com/p/Zw9o4
you should request to something like https://yourcoolsite.com/stuff/fucking_instagram_scraper.php?omitscript=true&url=https://www.instagram.com/p/Zw9o4

content of fucking_instagram_scraper.php should be like this:

<?php
$curl = curl_init();
curl_setopt_array(
	$curl,
	array(
		CURLOPT_AUTOREFERER => TRUE,
		CURLOPT_ENCODING => 'gzip,deflate',
		CURLOPT_FOLLOWLOCATION => TRUE,
		CURLOPT_RETURNTRANSFER => TRUE,
		CURLOPT_SSL_VERIFYHOST => FALSE,
		CURLOPT_SSL_VERIFYPEER => FALSE,
		CURLOPT_TIMEOUT => 3,
		CURLOPT_URL => "https://api.instagram.com/oembed/?{$_SERVER['QUERY_STRING']}",
	)
);
echo curl_exec($curl);
curl_close($curl);

of course you can add some fancy stuff like errors checking or (especially!) caching results in db/memory/fs (don't forget to serialize/unserialize data)

its works for now, until instagram broke another stuff...

p.s. sorry for my russian-english

[ramsrib]

It's not working now.

[NvdB31]

I've created a jsFiddle that shows the oEmbed endpoint simply cannot be queried clientside anymore.

https://jsfiddle.net/rcfdb7w0/

[FelixButzbach]

I can confirm that it just started working for me, too, without changing anything...
And thanks to everybody that came up with a solution!!

[eseQ]

@mtryggvason any idea how fix it?

[Ben-Davis1]

From what I understand, the fetch request needs to specify that it's using jsonp when fetching from the Instagram API.

I'm not sure why it's only just stopped working now though?

[badrange]

It was changed to json in November because of issues with jsonp:
#32

[Ben-Davis1]

Hmm, interesting @badrange. Any ideas why it's suddenly failing now?

[mtryggvason]

@eseQ I was thinking that I would create a proxy server and point to that using the url prop.

[zanderisrael]

Same issue here, any fix?

[hugovk]

Here's @NvdB31's report to Facebook:

https://developers.facebook.com/bugs/235545030662906/

Facebook have closed it:

Hi Nick, thanks for emailing. This issue is related to the legacy Instagram API (api.instagram.com) which isn't supported via this channel; this bug reporting tool only supports issues related to the Instagram Graph API. Additionally, as the legacy Instagram API has been deprecated as of July 2018, the team is no longer accepted bug reports for this API. Thanks for your understanding.

[taniabarreira]

Thanks @hugovk ,
Now, what do you suggest to solve this problem?
I'm temporarily embedding by iframe .. but I'm not sure if it's the most correct option ...

[FelixButzbach]

Also just recognized this problem on our page. Any other ideas?

[siemiatj]

Jesus fucking facebook. So much hassle to get some stupid ass photos for a simple page. I just built a scrapper on the server that fetches photos daily and saves them in a db giving me a simple api endpoint to hit.