CORS error when using R2

[angularisthebest]

Hello, I’m trying to make requests from my local environment but also on my webserver (as a website/client) but in both cases I’m getting a CORS error.

This is what I did/tried so far (for accountID, bucketName, accessKey, secretKey I made sure that they are all correct):

Setting cors policies via postman:
URL: [URL](https://accountID.r2.cloudflarestorage.com/bucketName?cors)
Method: Put
Authorization: AWS Signature, AccessKey + SecretKey
Body:

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

But also:

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

When I do GET on https://accountID.r2.cloudflarestorage.com/bucketName?cors I get e.g.:

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

So whatever I do, I see the corespondending changes.

On the R2 API Tokens page I already tried to use Client IP Address Filtering (In Include I added my webserver’s IP.).

I tried to do the following:

import { Injectable } from '@angular/core';
import * as S3 from 'aws-sdk/clients/s3';

@Injectable({
  providedIn: 'root'
})
export class S3Service {

  s3: S3
  
  constructor() {
    this.s3 = new S3({
      endpoint: `https://${'accountId'}.r2.cloudflarestorage.com`,
      accessKeyId: `${'accessKeyId'}`,
      secretAccessKey: `${'secretAccessKey'}`,
      signatureVersion: 'v4',
    });
  }

  upload() {
    this.s3.listBuckets().promise().then((val) => console.log(val)); // Here I get the cors error
  }
}

but also I have a webservice which generates me a presigned url to which I can make a POST call to. Generating a presigned url works, doing a POST call to it fails with a cors error.

What else I can try? I already followed several tutorials but nothing worked so far.

Thanks in advance!

[angularisthebest]

Also tried running the following command:
aws s3api put-bucket-cors --bucket bucketName --cors-configuration file://cors.json --endpoint-url https://accountId.r2.cloudflarestorage.com
And the content of cors.json is the following:

{
    "CORSRules": [
        {
            "AllowedMethods": [
                "PUT",
                "GET",
                "POST"
            ],
            "AllowedOrigins": [
                "http://localhost:4200"
            ]
        }
    ]
}

This is also exactly what I get back when running the following command:

aws s3api get-bucket-cors --bucket bucketName --endpoint-url https://accountId.r2.cloudflarestorage.com

I also tried the following code:

    this.s3.putBucketCors(
      {
        Bucket: 'bucketName',
        CORSConfiguration: {
          CORSRules: [
            {
              AllowedMethods: ['PUT', 'GET', 'POST', 'HEAD', 'OPTIONS'],
              AllowedOrigins: ['http://localhost:4200'],
              AllowedHeaders: [],
            },  
          ],
        },
      },
      (err, data) => {
        this.s3.listBuckets().promise().then((val) => console.log(val));
        console.log(err, data)
      }
    )

But even with that I get a cors error.