Retrieve image from cross-origin server using AJAX

Question

We are trying our best to retrieve images from other servers that are cross-origin. I don't believe JSONP can retrieve images, so we are trying plain AJAX GET requests. I have read that with iFrames you can change the domain of the front-end (using document.domain) and somehow trick the foreign server into believing you are in the same domain, but this seems really hacky. What is the most acceptable way to retrieve images from public servers? Do we just pray that they set the response header "Access-Control-Allow-Origin: *" or is there more we can do?

Reading a bit more about this, it seems like proper use of CORS is done by a server setting the aforementioned header: Access-Control-Allow-Origin. We have no control over that. So the only way to have some control over this seems to be the hacky iFrame methodology. So my question is more about how to implement this and how acceptable it is.

Answer 1

We have no control over that.

That's rather the point. If Malary's website could give itself permission to use Alice's browser to get information from Bob's website (with Bob's website believing the request came from Alice) then there wouldn't be any point in having a permission system in the first place!

So they only way to have some control over this seems to be the hacky iFrame methodology. So my question is more about how to implement this and how acceptable it is.

It is very limited and only works when dealing with subdomains of the same domain. Which you, presumably, are not.

---

If you want to get data from another site into your JavaScript then you need the cooperation of that site.

The only alternative is to use server side code to fetch the data (so the request is coming from you (or a third party that trusts you) and not your visitor's browser) before passing it to the browser.