CORS error when attempting to upload non-image to ImageField

[agsimmons]

If you have an ImageField, and try to upload a non-image file, the POST request initiated by s3file.js to the S3 bucket fails with a CORS error.

In Firefox, the error is Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://bucketname.s3.amazonaws.com/. (Reason: CORS request did not succeed). Status code: (null).

If you instead upload a valid image file to that same field, the request succeeds with no CORS error.

If you change the extension of a non-image file to .png, and upload it to the ImageField, there is no CORS error but the "Upload a valid image. The file you uploaded was either not an image or a corrupted image." error is displayed as expected.

My expectation is that if you try to upload a non-image file to an ImageField, it would be uploaded to tmp/s3file/ with no CORS error. The field validators would then execute, which would recognize that the uploaded file is not an image or doesn't have the correct extension, then an error would be returned and displayed to the user like normal. Alternatively, I would expect there to be no CORS error but instead a 4xx response from S3 if the content type is not allowed.

I haven't yet been able to identify why this is happening. I see that in the inputs data-fields-policy, it specifies ["starts-with", "$Content-Type", "image/"], but I don't know how this could cause a CORS error.