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.