All media are blocked! Any solution?

Hi, When I send request, I got url media data. such as profile picture url, photo media, video media. Like:

https://scontent-mct1-1.cdninstagram.com/v/t51.2885-19/s150x150/80028426_977596955970756_3505648007456489472_n.jpg?tp=1&_nc_ht=scontent-mct1-1.cdninstagram.com&_nc_ohc=Jz0204Q7lF8AX-KvWCl&edm=AJlpnE4BAAAA&ccb=7-4&oh=bce97e0cdd96fc84aed14131a02fc8af&oe=60BE5E3A&_nc_sid=312772

But when I want to load data in browser the request will be block:

< img src="https://scontent-mct1-1.cdninstagram.com/v/t51 ..."  / >

I got this error message in chrome inspect element developer tools

Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE

Any solution?

[shamshiranees]

@mohsen-rasouli Modify your image urls from https://scontent-arn2-1.cdninstagram.com/v/t51.2885-15/sh0xxx.jpg to: https://<YOUR.WORKER.URL>/https://scontent-arn2-1.cdninstagram.com/v/t51.2885-15/sh0xxx.jpg

[shamshiranees]

Create new worker in CloudFlare and paste below code

async function handleRequest(request) {
  let url = new URL(request.url)
  if (url.pathname.includes('cdninstagram.com')) {
    let newUrl = url.pathname.replace(/^\/+/, '').replace('https:/', 'https://') + url.search
    let response = await fetch(newUrl.toString(), request)
    response = new Response(response.body, response)
    response.headers.set('cross-origin-resource-policy', 'cross-origin')
    return response
  }
  return new Response("Bad url", { status: 404 })
}

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

This is working 👍🏻. https://gist.github.com/restyler/6c51e3ad20d7596e799d76e87cf93236