Prepublish checks - Upload External Media: Failing due to CORS policy

[MadtownLems]

Description

I've seen this mentioned a few times as responses to merge requests, but not as a dedicated issue, so I'm opening it here.

When I try to use the Prepublish Check -> Upload External Media feature, it fails:

Upload failed, try again.

The console shows:
Access to fetch '(remote url)' from origin (this site) has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I've seen reports most frequently with Google Docs images, but am experiencing it also with other sites we host.

For reference, some other reports were here:
#64741 (comment)
#46014 (comment)

Step-by-step reproduction instructions

For the sake of reproducing without exposing our site's URLs, I tried an image from google and got the same result.

1. Add an image block, and set the source from URL to be:
   https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png

2. Publish the Post. See that the External Media check flags this external media for uploading

3. Click 'Upload'

4. See that Upload failed, try again, with the same console error reported above

Screenshots, screen recording, code snippet

No response

Environment info

WP 6.7.2 and 6.8-Beta-3, with and without Gutenberg 20.5.0

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[Mamaduka]

Thanks, @MadtownLems!

This is a known issue, and as far as I know, there's nothing we can do about it on the editor client-side. cc @sgomes

The only option I can think of is to have a media proxy endpoint that receives a URL, does capability checks, and handles uploads for us. @adamsilverstein, do you think this idea has any merit?

[MadtownLems]

This is a known issue, and as far as I know, there's nothing we can do about it on the editor client-side

Thanks for the quick reply! If it's a known issue, one thing that might be helpful is if someone could do a writeup about modifying CORS policies for when the issue impacts other sites they host / have control over, rather than Google, in order to resolve these issues.

[Mamaduka]

That could be helpful, but I'm sure there are dozens of articles online about modifying CORS policies. The issue isn't WP-specific. You can try using the window.fetch to get the same image, and you'll see the same error/warning.

[adamsilverstein]

The only option I can think of is to have a media proxy endpoint that receives a URL, does capability checks, and handles uploads for us. @adamsilverstein, do you think this idea has any merit?

The idea has merit in that it could probably work, however isn't the "No 'Access-Control-Allow-Origin' header" intended to indicate that the resources should only be downloadable in the context of the specified domain? If so we would essentially be bypassing that intent. If this is the case, maybe the best we can do here is provide a clearer error message and instructions to help the user. eg something like "WordPress can't download the requested file directly. Please upload the original file directly".