I get a 200 but I always have CORS

I get a 200 but I always have CORS errors on object PUT request

25 Replies

Unknown User•3y ago

Message Not Public

kian•3y ago

How are you generating the URLs? A plain PutObject URL will work fine - if you're signing additional headers like Content-Type or Content-Length then that won't currently work

console.log(
    await getSignedUrl(S3, new PutObjectCommand({Bucket: 'sdk-example', Key: 'dog.png'}), { expiresIn: 3600 })
)

console.log(
    await getSignedUrl(S3, new PutObjectCommand({Bucket: 'sdk-example', Key: 'dog.png'}), { expiresIn: 3600 })
)

Unknown User•3y ago

Message Not Public

Maxou44OP•3y ago

import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";
import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
import config from "../config";

const S3 = new S3Client({
    region: "auto",
    endpoint: `https://${config.cloudflareR2.accountId}.r2.cloudflarestorage.com`,
    credentials: {
        accessKeyId: config.cloudflareR2.accessKeyId,
        secretAccessKey: config.cloudflareR2.secretAccessKey
    },
});

export const getUploadUrl = async (filePath) => {
    return getSignedUrl(S3, new PutObjectCommand({ Bucket: config.cloudflareR2.bucketName, Key: filePath }), { expiresIn: 8 * 3600 })
}

import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";
import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
import config from "../config";

const S3 = new S3Client({
    region: "auto",
    endpoint: `https://${config.cloudflareR2.accountId}.r2.cloudflarestorage.com`,
    credentials: {
        accessKeyId: config.cloudflareR2.accessKeyId,
        secretAccessKey: config.cloudflareR2.secretAccessKey
    },
});

export const getUploadUrl = async (filePath) => {
    return getSignedUrl(S3, new PutObjectCommand({ Bucket: config.cloudflareR2.bucketName, Key: filePath }), { expiresIn: 8 * 3600 })
}

Output url looks like : https://uploads.59d6cfa33763104c3a525a417344de88.r2.cloudflarestorage.com/files/1/79ef536f-video-1.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=fa7a99413a33df15cc3944cfe19d9816%2F20221002%2Fauto%2Fs3%2Faws4_request&X-Amz-Date=20221002T192357Z&X-Amz-Expires=28800&X-Amz-Signature=db3a591a4cf15278ca1ef0da950f1fb6114fa93b8e327da6bdcbb9315fb0f423&X-Amz-SignedHeaders=host&x-id=PutObject The OPTION request on this url in browser returns a 403

Maxou44OP•3y ago

Maxou44OP•3y ago

I tried to simplify the file path to "cat.jpg", but I have the same problem, the CORS are blocked. The bucket is public and connected to a domain name. I tried on other browser with the same issue, it's not a browser-cache issue 🧐 If you have an idea @kian I'm interested 😅

kian•3y ago

What’s the CORS configuration on the bucket?

Maxou44OP•3y ago

I made your HTTP call on Postman to set CORS, how can I check it ? If I make a GET on the same endpoint I get

<?xml version="1.0" encoding="UTF-8"?><CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"><CORSRule><AllowedMethod>PUT</AllowedMethod><AllowedOrigin>*</AllowedOrigin></CORSRule></CORSConfiguration>

<?xml version="1.0" encoding="UTF-8"?><CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"><CORSRule><AllowedMethod>PUT</AllowedMethod><AllowedOrigin>*</AllowedOrigin></CORSRule></CORSConfiguration>

The presigned url works on Postman, so it's only a CORS issue 🧐 I'm not sure about it, but I think the OPTIONS request got this error :

<?xml version="1.0" encoding="UTF-8"?>
<Error>
    <Code>SignatureDoesNotMatch</Code>
    <Message>The request signature we calculated does not match the signature you provided. Check your secret access key and signing method. </Message>
</Error>

<?xml version="1.0" encoding="UTF-8"?>
<Error>
    <Code>SignatureDoesNotMatch</Code>
    <Message>The request signature we calculated does not match the signature you provided. Check your secret access key and signing method. </Message>
</Error>

Unknown User•3y ago

Message Not Public

Maxou44OP•3y ago

I switched to multipart upload

Unknown User•3y ago

Message Not Public

Maxou44OP•3y ago

There is something with the Content-Type header

Unknown User•3y ago

Message Not Public

Maxou44OP•3y ago

For multi part I sent this request to set CORS :

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedOrigin>*</AllowedOrigin>
        <ExposeHeader>ETag</ExposeHeader>
    </CORSRule>
</CORSConfiguration>

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedOrigin>*</AllowedOrigin>
        <ExposeHeader>ETag</ExposeHeader>
    </CORSRule>
</CORSConfiguration>

Unknown User•3y ago

Message Not Public

Maxou44OP•3y ago

yep On ?cors endpoint

Unknown User•3y ago

Message Not Public

Maxou44OP•3y ago

The server-side code I use to generate/finish multipart. Based on this article for the logic : https://blog.logrocket.com/multipart-uploads-s3-node-js-react/

Antonello Zanini

LogRocket Blog

Multipart uploads with S3 in Node.js and React - LogRocket Blog

Explore S3 multipart upload in Node.js and React to enable faster and more flexible uploads into any Amazon S3-like cloud storage.

message.txt

Unknown User•3y ago

Message Not Public

Maxou44OP•3y ago

multi part is more complex to handle

Unknown User•3y ago

Message Not Public

Maxou44OP•3y ago

The 2-3 points to keep in mind : - ETag should be enabled using the ?cors enpoint - SigV2 (used by default) are not supported, you should use sigv4 like the code - Chunk size should be at least 5MB (except the last one)

Unknown User•3y ago

Message Not Public

girth_brooks•17mo ago

Did you ever find a solution? I'm getting the same error when trying to upload from browser with signed URL. Here is my CORS configuration for my bucket:

[
  {
    "AllowedOrigins": [
      "*"
    ],
    "AllowedMethods": [
      "PUT"
    ],
    "AllowedHeaders": [
      "content-type"
    ]
  }
]

A lot of people say changing the Allowed-Headers to content-type fixes everything but no luck for me. Any help is appreciated

stillmotion•14mo ago

Had this issue. It could be a few things: - Your access token to R2 could be expired - The CORS settings on the bucket's configuration page are incorrect (the CORS params passed to the presigned url request do nothing). Here's mine:

[
  {
    "AllowedOrigins": [
      "*"
    ],
    "AllowedMethods": [
      "GET",
      "HEAD",
      "PUT",
      "DELETE"
    ],
    "AllowedHeaders": [
      "Content-Type",
      "range",
      "Vary"
    ],
    "ExposeHeaders": [
      "Content-Type",
      "Access-Control-Allow-Origin",
      "ETag",
      "Vary"
    ],
    "MaxAgeSeconds": 3600
  }
]

[
  {
    "AllowedOrigins": [
      "*"
    ],
    "AllowedMethods": [
      "GET",
      "HEAD",
      "PUT",
      "DELETE"
    ],
    "AllowedHeaders": [
      "Content-Type",
      "range",
      "Vary"
    ],
    "ExposeHeaders": [
      "Content-Type",
      "Access-Control-Allow-Origin",
      "ETag",
      "Vary"
    ],
    "MaxAgeSeconds": 3600
  }
]

Gaming

Programming

I get a 200 but I always have CORS