Hi, when I'm accessing a R2 object and setting the If-Modified-Since header I'm receiving a CORS err

Lltdevv Hi, when I'm accessing a R2 object and setting the If-Modified-Since header I'm ...

K

Karew•1/18/24, 1:32 PM

Have you tried clearing the whole cache?

KKarew Have you tried clearing the whole cache?

L

ltdevvOP•1/18/24, 1:35 PM

If I clean the cache then I correctly receive a 200, but I want to use the cache that is the point. I shouldn't be receiving a CORS error for checking if I can use the cache(setting If-Modified-Since header).

D

devrunner•1/18/24, 2:01 PM

Is it possible to set an auto-delete timer for the uploaded images in the R2 storage, instead of doing it on my own after a while? (Not all images though, certain ones that I upload)

Z

zegevlier•1/18/24, 2:05 PM

This is the closest thing to that: https://developers.cloudflare.com/r2/buckets/object-lifecycles/

Z

zegevlier•1/18/24, 2:05 PM

Otherwise, you could set up a Durable Object on workers with an alarm to delete it

D

devrunner•1/18/24, 2:10 PM

Hmm, can I create a separate bucket under the same custom domain then and maybe add the object-lifecycles there?

D

devrunner•1/18/24, 2:12 PM

Ah, I've just checked it doesn't seem it's possible, that's alright I'll create another subdoman.

A

Alaanor•1/18/24, 4:38 PM

Hello, I'd like to expose my bucket as read only on internet. So I'm about to connect a custom domain but it does not explain whatever I should give a subdomain or connect through the root domain ?

A

Alaanor•1/18/24, 4:41 PM

ok I went with a subdomain. We'll see what happens.

AAlaanor Hello, I'd like to expose my bucket as read only on internet. So I'm about to co...

H

Hello, I’m Allie!•1/18/24, 4:43 PM

Either should be fine. It is up to you and where you want to put it

Lltdevv If I clean the cache then I correctly receive a 200, but I want to use the cache...

Ɽ

ⱤØ₥₳₦•1/18/24, 4:45 PM

Use allow origin response header

A

Alaanor•1/18/24, 4:48 PM

Do I need to create a worker if to give anyone access to my bucket file (readonly) on internet or is there something already built by default (like a cdn or smth). I'm a little confused

A

Alaanor•1/18/24, 4:50 PM

Public buckets are available on a regular HTTP endpoint. By default, there is no authorization or access controls associated with a public bucket. Anyone with a public bucket URL can access an object in that public bucket

Seem like it can by default, I just need to figure what url that would be

A

Alaanor•1/18/24, 4:51 PM

nvm I found !

A

Alaanor•1/18/24, 4:51 PM

awesome

J

justaname•1/18/24, 10:05 PM

is there a rust package to use r2 and kv without wrangler?

U

Unsmart•1/18/24, 10:06 PM

R2 can be used with an s3 compatable sdk. KV you either need to go through a cloudflare worker or the rest api.

U

Unsmart•1/18/24, 10:07 PM

and the rest api is not recommended

J

justaname•1/18/24, 10:27 PM

is there a reason for it being so tied in with workers? and not recommended to use the rest api?

E

ElGovanni•1/18/24, 10:44 PM

Can we expect ACL in R2? It's really annoying I cannot set specific files in public bucket as private :/

N

Nightelf9•1/19/24, 11:33 AM

hello - im trying to get started with simply showing a picture that i have in my bucket (ive been able to do it with another site but all the images in the public were public which im trying to avoid this time round)

im using cloudflare pages and linked to a github repository
i have made a html file to show an image of a panda and the html links to a javascript.js

the panda image is in my bucket - ive made the link between the page and the bucket - the bucket variable is called PANDA_BUCKET

async function getPandaImage(context) {
    try {
        const obj = await context.env.PANDA_BUCKET.get('baby panda.JPEG');
        
        if (obj === null) {
            console.log('Image not found');
            return new Response('Not found', { status: 404 });
        }

        console.log('Image found:', obj);

        return new Response(obj.body);
    } catch (error) {
        console.error('Error fetching Panda image:', error);
        return new Response('Internal Server Error', { status: 500 });
    }
}

async function getPandaImage(context) {
    try {
        const obj = await context.env.PANDA_BUCKET.get('baby panda.JPEG');
        
        if (obj === null) {
            console.log('Image not found');
            return new Response('Not found', { status: 404 });
        }

        console.log('Image found:', obj);

        return new Response(obj.body);
    } catch (error) {
        console.error('Error fetching Panda image:', error);
        return new Response('Internal Server Error', { status: 500 });
    }
}

async function getPandaImage(context) {
    try {
        const obj = await context.env.PANDA_BUCKET.get('baby panda.JPEG');
        
        if (obj === null) {
            console.log('Image not found');
            return new Response('Not found', { status: 404 });
        }

        console.log('Image found:', obj);

        return new Response(obj.body);
    } catch (error) {
        console.error('Error fetching Panda image:', error);
        return new Response('Internal Server Error', { status: 500 });
    }
}

async function getPandaImage(context) {
    try {
        const obj = await context.env.PANDA_BUCKET.get('baby panda.JPEG');
        
        if (obj === null) {
            console.log('Image not found');
            return new Response('Not found', { status: 404 });
        }

        console.log('Image found:', obj);

        return new Response(obj.body);
    } catch (error) {
        console.error('Error fetching Panda image:', error);
        return new Response('Internal Server Error', { status: 500 });
    }
}

heres the link
https://my-panda-app.pages.dev/

im not getting anything in the console for some reason

D

devrunner•1/19/24, 11:36 AM

Is it possible to get an image from the R2 storage using the Workers and resize it as well?

Original message was deleted

N

Nightelf9•1/19/24, 11:38 AM

im not using cloudflares workers, everythings in the github repository

D

devrunner•1/19/24, 11:38 AM

I can't use sharp or canvas though (I looked at pica), so is there a go-to library for that?

D

devrunner•1/19/24, 11:39 AM

I thought I could maybe use the cf worker options similarly to how you can when you fetch an image

D

devrunner•1/19/24, 11:39 AM

https://developers.cloudflare.com/images/image-resizing/resize-with-workers/

Resize with Cloudflare Workers · Cloudflare Image Optimization docs

Using Image Resizing with Workers gives you powerful programmatic control over every image request.

A

Azru•1/19/24, 12:05 PM

Hello, i've this error when fetching image from R2 bucket using

fetch(imageUrl);

fetch(imageUrl);

Access to fetch at 'https://****-5fde8e1e86a2.jpg' from origin 'http://localhost:5000' 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.

Access to fetch at 'https://****-5fde8e1e86a2.jpg' from origin 'http://localhost:5000' 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.

Access to fetch at 'https://****-5fde8e1e86a2.jpg' from origin 'http://localhost:5000' 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.

Access to fetch at 'https://****-5fde8e1e86a2.jpg' from origin 'http://localhost:5000' 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.

This my CORS policy :

[
  {
    "AllowedOrigins": [
      "*"
    ],
    "AllowedMethods": [
      "GET",
      "HEAD",
      "POST",
      "PUT"
    ],
    "AllowedHeaders": [
      "*"
    ]
  }
]

[
  {
    "AllowedOrigins": [
      "*"
    ],
    "AllowedMethods": [
      "GET",
      "HEAD",
      "POST",
      "PUT"
    ],
    "AllowedHeaders": [
      "*"
    ]
  }
]

[
  {
    "AllowedOrigins": [
      "*"
    ],
    "AllowedMethods": [
      "GET",
      "HEAD",
      "POST",
      "PUT"
    ],
    "AllowedHeaders": [
      "*"
    ]
  }
]

[
  {
    "AllowedOrigins": [
      "*"
    ],
    "AllowedMethods": [
      "GET",
      "HEAD",
      "POST",
      "PUT"
    ],
    "AllowedHeaders": [
      "*"
    ]
  }
]

B

Big Al•1/19/24, 4:38 PM

I am using AWS SDK V3 to upload/fetch files from R2. I am testing out the CreateBucketCommand and the ListBucketsCommand.
I am receiving these responses from both methods but no data:
response1= {
'$metadata': {
httpStatusCode: 200,
requestId: undefined,
extendedRequestId: undefined,
cfId: undefined,
attempts: 1,
totalRetryDelay: 0
}
}

I also added 'forcePathStyle: true' to the config which fixed the previous error of 'NoSuchBucket' when trying to create a bucket,
not sure how or why I had to do that. I've also tested this with AWS S3 and it creates the buckets and lists the buckets with no problems.

The code:

const options = {
  region: 'us-east-1',
  accessKeyId: process.env.ACCESS_KEY_ID!,
  secretAccessKey: process.env.SECRET_ACCESS_KEY!,
  endpoint: process.env.S3_ENDPOINT!,
  bucketName: 'test-bucket-1234-abcd-5678-efgh',
  maxFileSize: 10,
  validMimeType: [],
  format: 'url',
  urlExpiration: 10,
  path: path.join(__dirname, 'downloads')
};

describe('s3Controller', () => {
  it('should create a bucket', async () => {
    const input = {
      Bucket: options.bucketName,
    };

    try {
      const command = new CreateBucketCommand(input);
      const response = await client.send(command);
      console.log('response1=', response);

    } catch(err) {
      console.log('err=', err);
    }
    expect(response).toEqual({});
  });
});

describe('s3Controller', () => {
  it('should list buckets', async () => {

    try {
      const command = new ListBucketsCommand('');
      const response = await client.send(command);
      console.log('response2=', response);

    } catch(err) { 
      console.log('err=', err);
    }
    expect(response).toEqual({});
  });
});

const options = {
  region: 'us-east-1',
  accessKeyId: process.env.ACCESS_KEY_ID!,
  secretAccessKey: process.env.SECRET_ACCESS_KEY!,
  endpoint: process.env.S3_ENDPOINT!,
  bucketName: 'test-bucket-1234-abcd-5678-efgh',
  maxFileSize: 10,
  validMimeType: [],
  format: 'url',
  urlExpiration: 10,
  path: path.join(__dirname, 'downloads')
};

describe('s3Controller', () => {
  it('should create a bucket', async () => {
    const input = {
      Bucket: options.bucketName,
    };

    try {
      const command = new CreateBucketCommand(input);
      const response = await client.send(command);
      console.log('response1=', response);

    } catch(err) {
      console.log('err=', err);
    }
    expect(response).toEqual({});
  });
});

describe('s3Controller', () => {
  it('should list buckets', async () => {

    try {
      const command = new ListBucketsCommand('');
      const response = await client.send(command);
      console.log('response2=', response);

    } catch(err) { 
      console.log('err=', err);
    }
    expect(response).toEqual({});
  });
});

const options = {
  region: 'us-east-1',
  accessKeyId: process.env.ACCESS_KEY_ID!,
  secretAccessKey: process.env.SECRET_ACCESS_KEY!,
  endpoint: process.env.S3_ENDPOINT!,
  bucketName: 'test-bucket-1234-abcd-5678-efgh',
  maxFileSize: 10,
  validMimeType: [],
  format: 'url',
  urlExpiration: 10,
  path: path.join(__dirname, 'downloads')
};

describe('s3Controller', () => {
  it('should create a bucket', async () => {
    const input = {
      Bucket: options.bucketName,
    };

    try {
      const command = new CreateBucketCommand(input);
      const response = await client.send(command);
      console.log('response1=', response);

    } catch(err) {
      console.log('err=', err);
    }
    expect(response).toEqual({});
  });
});

describe('s3Controller', () => {
  it('should list buckets', async () => {

    try {
      const command = new ListBucketsCommand('');
      const response = await client.send(command);
      console.log('response2=', response);

    } catch(err) { 
      console.log('err=', err);
    }
    expect(response).toEqual({});
  });
});

const options = {
  region: 'us-east-1',
  accessKeyId: process.env.ACCESS_KEY_ID!,
  secretAccessKey: process.env.SECRET_ACCESS_KEY!,
  endpoint: process.env.S3_ENDPOINT!,
  bucketName: 'test-bucket-1234-abcd-5678-efgh',
  maxFileSize: 10,
  validMimeType: [],
  format: 'url',
  urlExpiration: 10,
  path: path.join(__dirname, 'downloads')
};

describe('s3Controller', () => {
  it('should create a bucket', async () => {
    const input = {
      Bucket: options.bucketName,
    };

    try {
      const command = new CreateBucketCommand(input);
      const response = await client.send(command);
      console.log('response1=', response);

    } catch(err) {
      console.log('err=', err);
    }
    expect(response).toEqual({});
  });
});

describe('s3Controller', () => {
  it('should list buckets', async () => {

    try {
      const command = new ListBucketsCommand('');
      const response = await client.send(command);
      console.log('response2=', response);

    } catch(err) { 
      console.log('err=', err);
    }
    expect(response).toEqual({});
  });
});

Any help would be much appreciated.

B

Big Al•1/19/24, 5:40 PM

I followed the example layed out here: https://developers.cloudflare.com/r2/examples/aws/aws-sdk-js-v3/
Is there any further documentation on aws sdk v3 besides that?

aws-sdk-js-v3 · Cloudflare R2 docs

You must generate an Access Key before getting started. All examples will utilize access_key_id and access_key_secret variables which represent the …

BBig Al I am using AWS SDK V3 to upload/fetch files from R2. I am testing out the Create...

Ɽ

ⱤØ₥₳₦•1/19/24, 5:50 PM

Thanks for idea

now I'll use Lambada edge function to upload gigantic files to R2

B

Barry_Based_Benson•1/19/24, 7:22 PM

Does generating a presigned url count as an operation? If so which one? A or B?

BBarry_Based_Benson Does generating a presigned url count as an operation? If so which one? A or B?

K

Karew•1/19/24, 7:24 PM

Presigning does not involve the server, it doesn’t cost anything

B

Barry_Based_Benson•1/19/24, 7:25 PM

But isn't the file content served by cloudflare? Doesn't it count as a read operation?

B

Barry_Based_Benson•1/19/24, 7:25 PM

@Karew

U

Unsmart•1/19/24, 7:27 PM

Generating a presigned url doesnt ever touch cloudflare. But when you actually go to the presigned url it will do whatever operation you told it and count

K

Karew•1/19/24, 7:27 PM

You asked about presigning. Your local S3 client presigns an unsent request. It doesn’t cost anything to presign. It only costs an operation if someone actually makes the request

E

Erisa•1/19/24, 8:57 PM

And then the type of operation charged depends on the type of request you created and used

A

Artefactoid•1/20/24, 12:10 AM

I just had a somewhat, um, weird experience with adding an R2 subscription. When I looked at my Billing Subscriptions, R2 was enabled. But when I attempted to configure it, all I got was the R2 intro funnel page with a big blue button asking me if wanted to add it to my subscriptions. Then I went to cancel the subscription. Only once it was canceled could I then access the actual R2 control panel. But it seems like I can't resubscribe to R2 now. Who should I be asking for help to be allowed to resubscribe to R2? TIA.

K

kian•1/20/24, 1:04 PM

I’ll take a look in 5 - there was an issue where the error is wrong for multi part uploads but I think that was fixed

K

kian•1/20/24, 1:11 PM

Did you test it w/ the example folder in the repo?

K

kian•1/20/24, 1:15 PM

How comes your logs don't have a remaining part? meowthinking

K

kian•1/20/24, 1:15 PM

Ah

K

kian•1/20/24, 1:20 PM

Good point

K

kian•1/20/24, 1:21 PM

timingSafeEqual is the same, where you need to encode the text beforehand and the two buffers have to be the same length but that means you can't rely on

string.length

string.length

K

kian•1/20/24, 1:21 PM

> "a".length
1
> "à".length
1
> new TextEncoder().encode("a").byteLength
1
> new TextEncoder().encode("à").byteLength
2

> "a".length
1
> "à".length
1
> new TextEncoder().encode("a").byteLength
1
> new TextEncoder().encode("à").byteLength
2

> "a".length
1
> "à".length
1
> new TextEncoder().encode("a").byteLength
1
> new TextEncoder().encode("à").byteLength
2

> "a".length
1
> "à".length
1
> new TextEncoder().encode("a").byteLength
1
> new TextEncoder().encode("à").byteLength
2

K

kian•1/20/24, 1:21 PM

This lovely stuff

K

kian•1/20/24, 1:23 PM

This is in OP's GitHub bio so it's possible meowlul

K

kian•1/20/24, 1:36 PM

I tested with

and

à

à

& that does seem to be the issue

K

kian•1/20/24, 1:36 PM

that's not very fun

Hi, when I'm accessing a R2 object and setting the If-Modified-Since header I'm receiving a CORS err

Similar Threads

Similar Threads

Similar Threads