Add CORS headers to the image download URL responses

[olgabulat]

In order to improve Photo Directory integration in Gutenberg through Openverse, the direct image URLs needs to set Access-Control-Allow-Origin="*" headers.

Gutenberg Openverse media inserter tries to download the images from providers (such as Photo Directory) and add it to the Media Library. When the direct image URL does not have a CORS header, the following error is thrown:

This image cannot be uploaded to your Media Library, but it can still be inserted as an external image.

This is the code in Gutenberg that shows this modal when an image cannot be fetched due to CORS issue:

​https://github.com/WordPress/gutenberg/blob/6db51a6ee92db6c3324a875135656861bbd9e55d/packages/block-editor/src/components/inserter/media-tab/media-preview.js#L145-L149

Can we add the CORS headers to the image URLs?

[olgabulat]

Error when adding an image from Photo Directory using Gutenberg Openverse integration

[coffee2code]

@olgabulat: Thanks for the report! I've added the Access-Control-Allow-Origin="*" header to the direct image URLs.

I've verified the header and tested it on a WP 6.3 install by searching Openverse via the Media Inserter to find an image that originated in the Photo Directory. It worked. (I, however, neglected to confirm that it didn't work before the change.) Let me know if the change is insufficient and what else may be needed.

[olgabulat]

Thank you so much, @coffee2code! I tested on the Openverse make blog, and the images are uploaded correctly.