skip to Main Content

I’m making an application that is just front end, and for the background images of the instagram videos shown I’m doing ->

background: url(https://www.instagram.com/p/${video_id}/media/?size=m) 

, for example:

background: url(https://www.instagram.com/p/C9zFMxnR1dr/media/?size=m);

, the problem is that the image is not loading, and in the console it is being shown:

instagram.fjdo1-2.fna.fbcdn.net/v/t51.29350-15/448756273_949006160245341_2706300162411218520_n.jpg?stp=dst-jpg_e15_p320x320&_nc_ht=instagram.fjdo 1-2.fna.fbcdn.net&_nc_cat=109& _nc_ohc=3J-YJuA1NckQ7kNvgH5VQoO&gid=8ca427d06716423fbcc40b90d2d1f6e7&edm=AGenrX8BAAAA&ccb=7-5&oh=00_AYC9mTyJvJzPwXBaHGebpHwSQf5oSBytky7PrKvxLtkK9w&oe=66B55F38&_nc_sid=ed990e:1
Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE.NotSameOrigin

Since I don’t have the server side, how do I change the cors from the front end so that this background works?

2

Answers


  1. The only way is proxy it through your own server. No way to pull this off just on the client.

    Login or Signup to reply.
  2. Try this Solution
    Basically it uses a vulnerability found in instagram image url using googletranslate. Decrypt your url using this file. You can also just create this code in any language simple url manipulation.
    https://github.com/syedjoharabbas/InstagramImageUrlDecrypt

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search