What is CORS?
Cross-Origin Resource Sharing (CORS) is a security mechanism that allows a web page from one domain to request resources from another domain. By default, web browsers block these "cross-origin" requests to prevent malicious scripts from accessing sensitive data.
When you store files in a Filebase bucket and want to access them directly from a web application (like a React app or a static site), you need to configure CORS on your bucket to tell the browser: "It's okay to let this website access these files."
Understanding Request Types
Not all cross-origin requests are treated the same. Browsers distinguish between "Simple" requests and those that require a "Preflight" check.
Simple Requests
Basic GET or POST requests that don't require preflight checks. The browser automatically sets CORS headers.
- Uses standard HTTP methods (GET, POST, HEAD)
- Contains only standard headers
- Content-Type limited to
application/x-www-form-urlencoded,multipart/form-data, ortext/plain
Preflight Requests
Complex requests that require an OPTIONS check before the actual request. This "preflight" asks the server for permission first.
- Required for
PUT,DELETE, or custom headers - Browser verifies response headers before sending the actual data
- Server must respond to the
OPTIONSmethod
CORS Configuration Elements
A CORS configuration is a JSON document that defines a set of rules. Here are the key elements you need to know:
| Element | Description |
|---|---|
| AllowedOrigins | Specify which domains can access your resources. Example: ["http://www.example.com"] |
| AllowedMethods | HTTP methods permitted for cross-origin requests. Example: ["GET", "PUT"] |
| AllowedHeaders | Custom headers allowed in requests. Example: ["*"] |
| ExposeHeaders | Headers that browsers are allowed to access in the response. Example: ["x-amz-request-id"] |
| MaxAgeSeconds | How long browsers should cache preflight results. Example: 3000 |
Implementation Guide
Follow this step-by-step guide to configure CORS for your Filebase buckets using the AWS CLI.
1. Basic Configuration
Create a file named corspolicy.json. This basic configuration allows cross-origin GET requests from all origins. This is useful for public read access.
{
"CORSRules": [
{
"AllowedHeaders": [],
"AllowedMethods": ["GET"],
"AllowedOrigins": ["*"],
"ExposeHeaders": []
}
]
}2. Advanced Configuration
For more control, you can specify allowed methods, headers, and cache duration. This example allows specific operations from example.com with custom headers.
{
"CORSRules": [
{
"AllowedHeaders": ["*"],
"AllowedMethods": ["PUT", "POST", "DELETE"],
"AllowedOrigins": ["http://www.example.com"],
"ExposeHeaders": [
"x-amz-server-side-encryption",
"x-amz-request-id",
"x-amz-id-2"
],
"MaxAgeSeconds": 3000
}
]
}3. Apply & Verify
Use the AWS CLI to apply the CORS configuration to your bucket. Make sure you have configured AWS CLI with your Filebase credentials first.
# Configure AWS CLI (if not already done)
aws configure
# Access Key ID: Your-Filebase-Access-Key
# Secret Access Key: Your-Filebase-Secret-Key
# Region: us-east-1
# Output Format: Optional
# Apply CORS configuration
aws --endpoint https://s3.filebase.com s3api put-bucket-cors \
--bucket your-bucket-name \
--cors-configuration file://corspolicy.json
# Verify configuration
aws --endpoint https://s3.filebase.com s3api get-bucket-cors \
--bucket your-bucket-nameConfiguration Builder
Generate a CORS configuration file based on your access requirements.
{
"CORSRules": [
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]
}A simple configuration that allows GET requests from any origin. This is suitable for basic testing and public read-only access to your bucket resources.
Best Practices Checklist
Before rolling this out to production, run through this quick security and performance checklist.
Security Considerations
- Origin Specification: Use exact domain origins in production environments instead of wildcards (
*). - Method Restriction: Only allow necessary HTTP methods (e.g., only
GETif you don't need uploads) to minimize attack surface. - Header Control: Explicitly specify allowed headers rather than using wildcards.
Performance Optimization
- Preflight Caching: Set appropriate
MaxAgeSeconds(e.g., 3000) to reduce the number of preflight requests your browser needs to make. - Header Minimization: Only expose necessary headers to reduce response size.