webcomponent-instagram-widget icon indicating copy to clipboard operation
webcomponent-instagram-widget copied to clipboard

Published 20 hours ago • verified publisher icon ptkdev-components

[Bug] CORS: error while retrieving images...

Open dtslvr opened this issue 3 years ago • 13 comments

Expected Behavior

Images from Instagram are loaded.

Actual Behavior

No images from Instagram are loaded.

Steps to Reproduce

  1. Visit https://codepen.io/ptkdev/pen/WNQOYqy
  2. See Error message console of developer tools: Access to fetch at 'https://www.instagram.com/ptkdev/?__a=1' from origin 'https://cdpn.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

dtslvr avatar Mar 02 '21 14:03 dtslvr

@dtslvr Instagram added a CORS Policy to the free api last week that this widget uses. I currently don't have a quick fix to solve this problem.

ptkdev avatar Mar 02 '21 15:03 ptkdev

@dtslvr workaround available in v2.9.0.

ptkdev avatar Mar 04 '21 10:03 ptkdev

It is working with v2.9.0. See here: dotsilver.ch

Thank you very much @ptkdev!

dtslvr avatar Mar 06 '21 08:03 dtslvr

Great!

ptkdev avatar Mar 06 '21 08:03 ptkdev

I had the same problem as the cors, I updated but it still gives me this and I have seen that also a @dtslvr website Schermata 2021-04-16 alle 11 28 57

ToledoNicola avatar Apr 16 '21 09:04 ToledoNicola

@ToledoNicola thanks, CORS issue appear again,

Workaround: refresh 5-6 times and random the google proxy skip cors. My plugin cached latest correct response.

ptkdev avatar Apr 16 '21 09:04 ptkdev

Facing the same issue :( The images fail to load image

Could there be a possibility of a future workaround since instagram is now blocking these requests? @ptkdev

sarsharma avatar Apr 27 '21 21:04 sarsharma

@SarthakSharma2199 i need help. I tried all solutions in my mind but don't work.

ptkdev avatar Apr 27 '21 23:04 ptkdev

Possibile workaround: Cloudflare worker to bypass Instagram new cross-origin policy on images (fixes net :: ERR_BLOCKED_BY_RESPONSE )

ptkdev avatar Apr 29 '21 10:04 ptkdev

I have the same CORS issue in my website, I tried to add CORS policy in my header on the server but it doesn't work. Is possible add a config property to set a proxy server and we can add the workaround for other servers not just cloudflare?

jcyovera avatar Apr 30 '21 18:04 jcyovera

I personally gave up trying to beat Instagram and ad blockers and created this service: https://profilepageimages.usecue.com. It is aimed at developers who want to integrate Instagram in a really simple way.

Simple: https://codepen.io/joosts/pen/NWbdMLW?editors=1100 Advanced: https://codepen.io/joosts/pen/bGBByOo

The service currently has 75 users and is used on 21 websites. It uses the Instagram Basic Display API. I hate that this is required, but it gets the job done (properly).

jhvanderschee avatar Apr 30 '21 23:04 jhvanderschee

same here :/ a

edoardottt avatar May 01 '21 17:05 edoardottt

hi, I guess it is not working.... anyone has found an alternative ? thanks

marizona avatar Jun 21 '21 12:06 marizona