thetoine
commented
3 years ago Hello,
Replying to myself here. But hey, here's some insights!
I managed to find a work around for this using a CloudFlare Worker. Basically, the worker wrap the request and change the cross-origin policy with response.headers.set("Cross-Origin-Resource-Policy", "cross-origin")
On a plain regular img tag :
<img src="https://instagram-cors-worker.your-company.workers.dev/?image_url=https%3A%2F%2Fcdn.instagram..." />
CF Worker :
async function handleRequest(request) {
const url = new URL(request.url)
let image_url = url.searchParams.get("image_url")
if(!image_url) return new Response("Error. No image_url URL param detected", {status: 500})
// Rewrite request to point to API url. This also makes the request mutable
// so we can add the correct Origin header to make the API server think
// that this request isn't cross-site.
request = new Request(image_url, request)
request.headers.set("Origin", new URL(image_url).origin)
let response = await fetch(request)
// Recreate the response so we can modify the headers
response = new Response(response.body, response)
// Set CORS headers
response.headers.set("Cross-Origin-Resource-Policy", "cross-origin")
// Append to/Add Vary header so browser will cache response correctly
response.headers.append("Vary", "Origin")
return response
}
addEventListener('fetch', async event => {
event.respondWith(handleRequest(event.request))
})Hope this helps anyone.
MindsetZack
NithinSGowda
This is not 100% related to this project but directly impacted. I noticed since a few days ago that Instagram is blocking hot linking to images outside its domain.
Am I alone experiencing this? I can't figure if they blocked our domain or if it's a new recent policy.