search

jsanahuja / jquery.instagramFeed

Instagram Feed without access token. Not using the Instagram API
MIT License
313 stars 164 forks source link

Access to XMLHttpRequest has been blocked by CORS policy #134

Open alexiswebmaster opened 3 years ago

alexiswebmaster commented 3 years ago

Hello everyone

Today I was checking my site and I started seeing CORS errors even using version 3.0.4.

I checked the demos at https://www.sowecms.com/ and they also give CORS error

Access to XMLHttpRequest at 'https://images2199-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https://www.instagram.com/github/' from origin 'https://www.sowecms.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

imagen

Apparently the option to use the proxy with google is not working

perryworld commented 3 years ago

Hi,

All our sites are having the same issue as Alexiswebmaster. You can see it on our site at https://pollingtonpreschool.com/gallery/pollington-social-media

Thanks Rich

perryworld commented 3 years ago

Quick update - they have all suddenly started working again!

Rich

alexiswebmaster commented 3 years ago

Weird, why does this happen? Could it be that it depends on the instagram server where the request arrives?

Everything works perfectly on my site now!!!!

georgiyboekov commented 3 years ago

What happens when you send many request? Are you using this proxy -

https://images' + ~~(Math.random() * 3333) + '-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https://www.instagram.com/' + options.username;

I seem to be getting this Error 400

image

Tried to make a workaround with different values in the math.random , but it seems that doesn't help at all. If anyone can provide a fix I am willing to pay for that.

greyskin commented 3 years ago

We're also seeing this error. But only if we refresh the browser. The first time we load the page we get nothing: no images loaded and no error. Upon browser refresh we get images loaded but also the aforementioned error message.

Chrome Version 89.0.4389.114 (Official Build) (64-bit) Windows 10 Pro Version 20H2 OS Build 19042.867

web-burn commented 3 years ago

I have the same problem too. The feed doesn't work now.

nroccogit commented 3 years ago

Same for me. Request error: header CORS “Access-Control-Allow-Origin” missing

mewcrazy commented 3 years ago

Same here, sometimes it works, sometimes it doesn't. Guess we have to write our own caching, since the implemented one here doesn't seem to work in any way.

stoker88 commented 3 years ago

Does anyone have any links to the documentation for the google proxy? Trying to look into this myself but i can find absolutely nothing on it.

georgiyboekov commented 3 years ago

https://gist.github.com/carlo/5379498 I've found only this one regarding the proxy and tried different variations on it but the issue still persists.

stoker88 commented 3 years ago

@georgiyboekov yeh came across that too with no luck!

awasson commented 3 years ago

I did some looking last week and it appears that the solution will be to use a proxy server to Set CORS headers when the browser receives the results of the request. I wonder if Cloudflare or another 3rd party service can do this. I've tried several proxies that were suggested in articles I've read but none are currently providing that function.

This article describes the issue: https://medium.com/@dtkatz/3-ways-to-fix-the-cors-error-and-how-access-control-allow-origin-works-d97d55946d9

This article is also a good read: https://medium.com/nodejsmadeeasy/a-simple-cors-proxy-for-javascript-applications-9b36a8d39c51

georgiyboekov commented 3 years ago

It seems like we will need to build our own proxy that functions in the same way as focus-opensocial.googleusercontent if we are intending to use this script in the future.

mewcrazy commented 3 years ago

Yeah lets go, we donate 50$ for 1 year :D

stoker88 commented 3 years ago

@awasson - I am yet to find an existing service, that works in this scenario out of the box. The most promising so far looks to to be CORSflare - which can be deployed as a Cloudflare worker service. https://github.com/Darkseal/CORSflare

However - this would then complicate the installation and usage of this library to require users to setup cloudflare accounts and have knowledge of workers etc. Free accounts are limited to 100,000 requests per day - so it could be kept under that limit with some resourcefulness.

awasson commented 3 years ago

@stoker88 - Thanks for that. It's about the best approach I've seen up to now. I agree, it's not an easy fix but it might work in some cases. I'll have to give it a spin. In the meantime, I'll keep looking.

georgiyboekov commented 3 years ago

Unfortunately it seems like Instagram is doing their best now to suspend the scraping of their website. There were PHP requests that were working 1 month ago, but now the IP just gets blocked and it redirects you to login before seeing any content. Anyway, if anyone can find a solution to make this script working better than it is now, I'm willing to pay for that.

AlexSus commented 3 years ago

Someone tried to use CORSflare? I registered cloudflare, installed worker with CORSflare and my settings but its failed. Instagram redirects to login page or sent error 428. Maybe some special settings needed for CORSflare?

awasson commented 3 years ago

@AlexSus, How did you do your configuration? I've tried to use it as well but not to any success.

My guess is that we want to proxy Google and not Instagram so that might be the issue you are having. I am using the following: const upstream = '*.googleusercontent.com';

Then in my init code I've set the host as: host: 'https://images' + ~~(Math.random() * 3333) + '-focus-opensocial.my-cloudflare-worker.workers.dev/' where my-cloudflare-worker.workers.dev is the URL that Cloudflare have given me.

Mine doesn't work yet. I get an error but it could be getting closer: Unsupported protocol The client and server don't support a common SSL protocol version or cipher suite.

georgiyboekov commented 3 years ago

https://rapidapi.com/restyler/api/instagram40?endpoint=apiendpoint_efc09d4e-5da9-4340-b708-a0969921da85

I've managed to connect to instagram with this script and the api, but the console response is different and it needs to be parsed. I hope that this helps someone make their feed working

AdamReznicek commented 3 years ago

Same issue here, good luck with fixing :)

gyxman commented 3 years ago

Has anybody found a solution?

mewcrazy commented 3 years ago

rapidapi seems to be working, 100requests per month in free version. But the javascript version doesn't seem to work well. As soon as you insert the thumbnail_src to an img-tag then the browser doesn't show them.(ERR BLOCKED RESOURCE)

But with PHP or so it should work if you previously download the image or pass it through. I will try that till end of this week.

hmdnawazz commented 3 years ago

I have the same issue. I even tried to use a simple HTML file with an image tag.

<img src="https://scontent-arn2-2.cdninstagram.com/v/t51.2885-15/sh0.08/e35/s640x640/174191033_293248945850264_4706822520582962514_n.jpg?tp=1&_nc_ht=scontent-arn2-2.cdninstagram.com&_nc_cat=1&_nc_ohc=lUMp5EnMMW8AX__E42K&edm=ABfd0MgBAAAA&ccb=7-4&oh=c755580e7a5f0c8e3d4170122390efbc&oe=60AE0543&_nc_sid=7bff83" />

But getting the same error. I think it is from the Instagram server side.

GET https://scontent-arn2-2.cdninstagram.com/v/t51.2885-15/sh0.08/e35/s640x640/174191033_293248945850264_4706822520582962514_n.jpg?tp=1&_nc_ht=scontent-arn2-2.cdninstagram.com&_nc_cat=1&_nc_ohc=lUMp5EnMMW8AX__E42K&edm=ABfd0MgBAAAA&ccb=7-4&oh=c755580e7a5f0c8e3d4170122390efbc&oe=60AE0543&_nc_sid=7bff83 net::ERR_BLOCKED_BY_RESPONSE