Question 401082 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Failed to load image to background

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?

Tags:

2

Answers


  1. 0

    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. 0

    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