DO Spaces with React and Rails Active Storage direct upload 403 Forbidden error

This turned out to be a simple CORS issue. I was fixated on the network tab in my browser watching the request get denied. Had I checked out the console tab I would have seen these errors:

OPTIONS https://{REDACTED}.nyc3.digitaloceanspaces.com/{REDACTED}?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential={REDACTED%2F20180919%2Fnyc3%2Fs3%2Faws4_request&X-Amz-Date=20180919T134657Z&X-Amz-Expires=300&X-Amz-SignedHeaders=content-md5%3Bcontent-type%3Bhost&X-Amz-Signature={REDACTED} 
403 (Forbidden)

Access to XMLHttpRequest at 
'https://{REDACTED}.nyc3.digitaloceanspaces.com/{REDACTED}?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential={REDACTED}%2F20180919%2Fnyc3%2Fs3%2Faws4_request&X-Amz-Date=20180919T134657Z&X-Amz-Expires=300&X-Amz-SignedHeaders=content-md5%3Bcontent-type%3Bhost&X-Amz-Signature={REDACTED}' 
from origin 'https://{$MY_REACT_APP_URL}' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

Taking a look at my original request from the network tab in Chrome I can see that the denied request sent the following headers:

Request Headers:
...
Access-Control-Request-Headers: content-md5,content-type
...

Adding a CORS Rule for the $MY_REACT_APP_URL in the above console error with the Allowed headers of content-md5 and content-type took care of this issue.

I also allowed all the methods in the CORS editor and set a max age of 3000 seconds.