Request: remove same origin requirement for API images

[michealparks]

This restriction limits client side apps attempting to make use of the https://metmuseum.github.io API

[bravokiloecho]

I have a use case that requires this and it would be very lovely for the images to be accessible in this way

[stephenhmarsh]

It seems CORS headers have been removed from images.

Behold your image https://images.metmuseum.org/CRDImages/ep/original/DT8844.jpg:

cc @spencerk

[esDotDev]

@stephenhmarsh Is it possible this has been regressed? We're trying to load images using Flutter client, and getting this error:

[esDotDev]

Here's an example of https://images.metmuseum.org/CRDImages/as/web-large/DP-17100-001.jpg failing the CORS test: https://cors-test.codehappy.dev/?url=https%3A%2F%2Fimages.metmuseum.org%2FCRDImages%2Fas%2Fweb-large%2FDP-17100-001.jpg&origin=https%3A%2F%2Fwonderous.app%2Fweb%2F&method=get

Using the URL above (https://images.metmuseum.org/CRDImages/ep/original/DT8844.jpg) does work:
https://cors-test.codehappy.dev/?url=https%3A%2F%2Fimages.metmuseum.org%2FCRDImages%2Fep%2Foriginal%2FDT8844.jpg&origin=https%3A%2F%2Fwonderous.app%2Fweb%2F&method=get

[stephenhmarsh]

thanks @esDotDev - especially appreciate the examples. we've created an internal ticket to look into it. cc @spencerk

[esDotDev]

@stephenhmarsh @spencerk Thanks for looking into this! Here is an interactive example, one button downloads from unsplash.com which works, the other downloads from metmuseum.org and fails:
https://jsfiddle.net/54f21ue3/11/

<button onclick="downloadImage('https://images.metmuseum.org/CRDImages/ep/original/DT8844.jpg')">Download MET Image</button>

<button onclick="downloadImage('https://images.unsplash.com/photo-1512813389649-acb9131ced20')">Download Unsplash Image</button>

<script>
  function downloadImage(url) {
    fetch(url)
      .then(resp => resp.blob())
      .then(blob => {
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        var fileName = url.split(/[#?]/)[0].split('/').pop();
        a.download = fileName;
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
      })
      .catch((e) => alert('An error occurred while downloading the image.\n' + e));
  }

</script>