No 'Access-Control-Allow-Origin' header is present on the requested resource

[vgavrilovikj]

Hello, I have installed the package and included in my Home component like this: <Feed userName="jamespaulmoriarty" className="Feed" classNameLoading="Loading" limit="3"/>

However I keep on getting this issue, not sure how it can be resolved...

Can you please help me? :)

[vgavrilovikj]

@jamesmoriarty

[jamesmoriarty]

@vgavrilovikj please upgrade the library to v2.0.0. A change on instagrams side broke previous versions.

[vgavrilovikj]

this is what I have in my package.json - I believe it's the v2.0.0 but even with this it's not working.. @jamesmoriarty

[jamesmoriarty]

Sounds like this: https://github.com/jamesmoriarty/react-instagram-authless-feed/issues/17#issuecomment-791021158

What are you serving your site with?

[vgavrilovikj]

@jamesmoriarty I am using Laravel & reactjs... yeah it does sound like that but I didn't found a solution on that issue.. any idea how to solve this?

[jamesmoriarty]

@vgavrilovikj: https://stackoverflow.com/questions/39429462/adding-access-control-allow-origin-header-response-in-laravel-5-3-passport

[vgavrilovikj]

@jamesmoriarty tried that but it doesn't work.. I guess it may be, because in Laravel you have CSRF token, and you should use the CSRF token when making an API call, but probably the package doesn't use it, so it may be because of that.. but I really am not sure... as from what I saw so far all those issues related to the headers for Laravel were for "/api/*" routes and not external ones...

[vgavrilovikj]

@jamesmoriarty from what I've been trying so far I guess it's something that should be configured in the fetch function in Instagram.js

[jamesmoriarty]

Hey, it's on your side. Your laravel application serves a response with headers that restrict clientside requests to instagram.com and other origins. You need to read up on Laravel and CORS. It's to protect your site from cross site scripting.

[vgavrilovikj]

@jamesmoriarty Okay and how can I solve it...? Because even if I add X-CSRF-TOKEN in the fetch () function it still doesn't work..

[jamesmoriarty]

Start with this: https://www.twilio.com/blog/handling-cross-origin-resource-sharing-cors-requests-laravel-7

[vgavrilovikj]

@jamesmoriarty yeah even installed the package https://github.com/fruitcake/laravel-cors .. and set it up correctly, but still no success sadly... and when making the fetch added this..

but still nothing..

[vgavrilovikj]

@jamesmoriarty I tried adding the header Access-Control-Allow-Origin "*" to the nginx server directly, but still not a success

[jamesmoriarty]

It needs to be a response header on the page that makes the request clientside. E.g. index.php returned with the header and the client/browser requests instagram.com.

[jamesmoriarty]

Apologies @vgavrilovikj looks like I'm seeing the same thing now. Appears something changed on the remotes this component depends on again.

[vgavrilovikj]

@jamesmoriarty any idea how we can solve this..? Cause I really need this package for a website, as I haven't found any other good way to implement an Instagram feed on a website..

[vgavrilovikj]

@jamesmoriarty this is what I have in the response headers:

[vgavrilovikj]

@jamesmoriarty also I just tried this one, when I open the console I am getting an error but somehow it works..

Here's the link to this package: https://www.sowecms.com/demos/InstagramFeed/

[jamesmoriarty]

@vgavrilovikj I'm currently testing this: https://github.com/jamesmoriarty/react-instagram-authless-feed/pull/20/files

Having some issues verifying the fix/replicating the issue.

[jamesmoriarty]

Looks like they made the workaround unusable even with the retry now.

[vgavrilovikj]

Were you able to resolve this...? @jamesmoriarty

[jamesmoriarty]

@vgavrilovikj no. Instagram/Google made further changes which broke the last workaround. Hoping a new workaround appears in one of the other Github repositories.