Access to XMLHttpRequest has been blocked by CORS policy

[alexiswebmaster]

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.

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

[perryworld]

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]

Quick update - they have all suddenly started working again!

Rich

[alexiswebmaster]

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]

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

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]

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]

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

[nroccogit]

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

[mewcrazy]

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]

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]

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]

@georgiyboekov yeh came across that too with no luck!

[awasson]

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]

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]

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

[stoker88]

@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]

@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]

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]

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]

@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]

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]

Same issue here, good luck with fixing :)

[gyxman]

Has anybody found a solution?

[mewcrazy]

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]

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