R2 CORS error

Developers Storage
1

I’m using Filament PHP admin panel builder which sends a signed upload URL to frontend for uploading temporary images to R2 storage bucket, but I’m receiving CORS error even after setting allowed origins to * and allowing GET, POST and PUT methods. I’m getting the following error.

Access to XMLHttpRequest at 'https://assets.<project-hash>.r2.cloudflarestorage.com/temp/2cPCOkAf5iqZ5RxO2qg8pqfj2QLNRt-metabXktdmFtcGlyZS1zeXN0ZW0uanBlZw%3D%3D-.jpg?x-amz-acl=private&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=b706a11cd4c83e0cd1b9dbdac0109a1f%2F20231025%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231025T111408Z&X-Amz-SignedHeaders=host%3Bx-amz-acl&X-Amz-Expires=300&X-Amz-Signature=9ffaadaa6b9cafd8a76c02955087948265bef0e34aefeead8f50faea3721dd53' from origin 'https://beta.example.com' 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.

Following is my CORS configuration.

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

Solved the issue by adding the following headers in ExposeHeaders in CORS config.

"ExposeHeaders": [
      "Content-Type",
      "Access-Control-Allow-Origin",
      "ETag"
]
4

Following is the full CORS configuration.

[
  {
    "AllowedOrigins": [
      "https://example.com"
    ],
    "AllowedMethods": [
      "HEAD",
      "GET",
      "POST",
      "PUT"
    ],
    "AllowedHeaders": [
      "Content-Type",
      "Content-Language",
      "Content-Encoding",
      "Content-Disposition",
      "X-Amz-Acl"
    ],
    "ExposeHeaders": [
      "Content-Type",
      "Access-Control-Allow-Origin",
      "ETag",
      "Cache-Control",
      "Content-Disposition",
      "Content-Encoding",
      "Expires"
    ]
  }
]
1 Like
5

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.