I'm generating an S3 presigned URL on my Express server like this:
const presignedUrl = s3.getSignedUrl('putObject', {
Bucket: `bucket`,
Key: `key`,
ContentType: "image/*"
});
I then send this URL to the client (React) so that the user can upload an image using the presigned url. I do so like this:
const myHeaders = new Headers({ 'Content-Type': 'image/*' });
const res = await fetch(url, {
method: 'PUT',
headers: myHeaders,
body: file
});
However, after I try uploading the object, I get this error back from S3:
{
body: (...)
bodyUsed: false
headers: Headers {}
ok: false
redirected: false
status: 403
statusText: "Forbidden"
type: "cors"
url: "https://bucket.s3.amazonaws.com/key?Content-Type=image%2F%2A&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential={credential}&X-Amz-Date=20211126T000212Z&X-Amz-Expires=900&X-Amz-Signature={signature}&X-Amz-SignedHeaders=host"
}
I know people get CORS errors but I haven't seen an ambiguous one like this. Moreover, the preflight check returns 200. Here is my bucket's CORS policy
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"PUT",
"GET"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": [],
"MaxAgeSeconds": 3000
}
]
This is all in local development so my server is on http://localhost:5000 and my client is on http://localhost:3000. Does anyone know how I can get around this?