Cross=Origin Request Blocked

[larrynalzaro]

Hi there again,

I'm getting this error when I invoke a second Instagram account. If it's just one account, no problemo. But if I try to get the feed on another account, I get this error.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.instagram.com/berwickcycles/?__a=1. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

[kasperlegarth]

Hi @larrynalzaro ,
Do you happen to have an example of this bug I can inspect and help you debug?
I can't recreate your problem. See here: https://codepen.io/legarth/pen/oNYpXox

[larrynalzaro]

Hi Kasper,

It's on this site, right above the footer section: https://mornington-cycles.shoplightspeed.com/

This is the code:

<div class="instastory" id="mornington_ig"></div>
<div class="instastory" id="berwick_ig"></div>
<script src="instastory.js"></script>
<script>
$(document).ready(function(){
	$("#mornington_ig").instastory({
		get: '@morningtoncycles',
		imageSize: 240,
		limit: 5
	});
	$("#berwick_ig").instastory({
		get: '@berwickcycles',
		imageSize: 240,
		limit: 5,
	});	
});	
</script>

[loranger]

I got the same issue on my website using Firefox and Safari, even on the codepen :

[trstnpr]

I am also experiencing the same issue with production as IG feed stops showing. Here's my test snippet which is not working https://codepen.io/trstnpr/pen/WNvKZWq

[ninjao]

Yeah, I am also experiencing this issue.

It is a forced change so we have to use authentication properly and not use client side requests?

edit: @kasperlegarth your codepen also doesn't work.

[mediabouncedev]

Having same issue here. Any solutions?

[kasperlegarth]

Hi all,
I'm sorry for the long response time. I have been investigating a lot. As of right now, there is no solution, and I fear that there have been some breaking changes on the other end, and the plugin has been made obsolete. I have not given up yet. But I think people should start planning for a plan b.

I apologize for all the inconvenience.

[mediabouncedev]

Not sure if this would help with a fix but this one still works and has a CORS work around. https://www.sowecms.com/demos/InstagramFeed/

[ninjao]

Not sure if this would help with a fix but this one still works and has a CORS work around. https://www.sowecms.com/demos/InstagramFeed/

Not for me. Also has CORS issue, do you have a working example?

To be honest I think they pulled the plug on public requests and we need to consider working with access tokens etc.

[kerr325]

I have what I believe is a simple fix that worked for me if you simply add the argument of crossorigin to your script tag it resolves the issue, for example:

<script src="assets/js/insta-min.js" crossorigin></script>

[kasperlegarth]

@mediabouncedev, i have seen that plugin as well. But sadly, it is not a stable solution they have come up with. It looks like they just keep requesting until they get an answer back from the server, they can use This results in potentially a lot of errors in the console. Witch, I'm not very fond of.

@ninjao sadly I think you are right. It seems that we have to do it the "right" way now.

@kerr325 sadly it did not work for me. I have updated the demo, and as you can see it have no effect. https://kasperlegarth.github.io/instastory.js/

[ninjao]

@kasperlegarth thanks for your work. It was too good to be true for too long, now we have to face the reality of complicated process for simple things.