diff --git a/CORS.md b/CORS.md index 9234316..0f2234d 100644 --- a/CORS.md +++ b/CORS.md @@ -1,79 +1,74 @@ -Let me first look at how your application is loading the audio files to understand the CORS requirements. +For DreamHost hosting, the owner of `feed.falsefinish.club` can configure CORS headers using an `.htaccess` file in the root directory of the site (or in the specific directory serving the audio files). -[1 tool called] +## Setting CORS Headers on DreamHost -Looking at your code, I can see the `TrackCache` module uses `fetch()` to cache audio files from `feed.falsefinish.club`. For this to work when your player is hosted on `echo-reality.com`, the server at `feed.falsefinish.club` needs to send proper CORS headers. +Create or edit the `.htaccess` file in the web root (typically `~/falsefinish.club/feed/` or wherever the audio files are served from) and add: -## What the owner of falsefinish.club needs to do - -The server hosting the audio files must add these HTTP response headers: - -``` -Access-Control-Allow-Origin: https://echo-reality.com -Access-Control-Allow-Methods: GET, HEAD, OPTIONS -Access-Control-Expose-Headers: ETag, Last-Modified, Content-Length -``` - -The `Expose-Headers` part is important because your `TrackCache` reads `ETag` and `Last-Modified` headers for cache validation (lines 1539-1554 in your code). - -### Server-specific configurations: - -**Nginx:** -```nginx -location / { - add_header 'Access-Control-Allow-Origin' 'https://echo-reality.com' always; - add_header 'Access-Control-Allow-Methods' 'GET, HEAD, OPTIONS' always; - add_header 'Access-Control-Expose-Headers' 'ETag, Last-Modified, Content-Length' always; - - # Handle preflight requests - if ($request_method = 'OPTIONS') { - add_header 'Access-Control-Allow-Origin' 'https://echo-reality.com'; - add_header 'Access-Control-Allow-Methods' 'GET, HEAD, OPTIONS'; - add_header 'Access-Control-Max-Age' 86400; - add_header 'Content-Length' 0; - return 204; - } -} -``` - -**Apache (.htaccess):** ```apache +# Enable CORS for echo-reality.com Header set Access-Control-Allow-Origin "https://echo-reality.com" Header set Access-Control-Allow-Methods "GET, HEAD, OPTIONS" Header set Access-Control-Expose-Headers "ETag, Last-Modified, Content-Length" + +# Handle preflight OPTIONS requests + + RewriteEngine On + RewriteCond %{REQUEST_METHOD} OPTIONS + RewriteRule ^(.*)$ $1 [R=200,L] + ``` -**Cloudflare (if used):** Add a Transform Rule or use a Cloudflare Worker to inject headers. +### If targeting specific file types only (recommended) -**S3/CloudFront:** Configure CORS in the bucket settings: -```json -[ - { - "AllowedOrigins": ["https://echo-reality.com"], - "AllowedMethods": ["GET", "HEAD"], - "AllowedHeaders": ["*"], - "ExposeHeaders": ["ETag", "Last-Modified", "Content-Length"], - "MaxAgeSeconds": 86400 - } -] +To apply CORS headers only to audio files: + +```apache + + + Header set Access-Control-Allow-Origin "https://echo-reality.com" + Header set Access-Control-Allow-Methods "GET, HEAD, OPTIONS" + Header set Access-Control-Expose-Headers "ETag, Last-Modified, Content-Length" + + ``` -### For development/testing +### For multiple origins (if needed during development) -During development, you might want to allow multiple origins. Use a wildcard temporarily: -``` -Access-Control-Allow-Origin: * +If you need to allow both the production domain and a local development server: + +```apache + + SetEnvIf Origin "^https://(echo-reality\.com|localhost:3000)$" CORS_ORIGIN=$0 + Header set Access-Control-Allow-Origin "%{CORS_ORIGIN}e" env=CORS_ORIGIN + Header set Access-Control-Allow-Methods "GET, HEAD, OPTIONS" + Header set Access-Control-Expose-Headers "ETag, Last-Modified, Content-Length" + ``` -But for production, always specify the exact origin (`https://echo-reality.com`) for security. +### How to add the .htaccess file on DreamHost -### Why this matters for your code +1. **Via SFTP/FTP**: Connect to the server using an FTP client (like FileZilla) and upload/edit the `.htaccess` file in the appropriate directory -Your `TrackCache.isStale()` function (lines 1519-1568) makes HEAD requests to check if files have changed. Without CORS headers: -1. The `fetch()` calls fail with CORS errors -2. Your code falls back to direct URLs (line 1753-1756), which works for playback but bypasses caching -3. The `ETag` and `Last-Modified` headers won't be readable even if fetches succeed partially +2. **Via DreamHost Panel File Manager**: Log into the DreamHost panel → Manage Websites → Files → navigate to the directory and create/edit `.htaccess` -The current fallback behavior is good defensive code, but to enable actual caching benefits, those headers must be configured on `feed.falsefinish.club`. \ No newline at end of file +3. **Via SSH** (if enabled): SSH into the server and use a text editor like `nano` or `vim` + +### Important notes for DreamHost + +- DreamHost's shared hosting uses Apache, so `.htaccess` files work out of the box +- The `mod_headers` module is enabled by default on DreamHost +- Make sure the `.htaccess` file has proper permissions (644) +- Changes take effect immediately—no server restart needed + +### Testing the configuration + +After adding the `.htaccess` file, the owner can verify it's working by checking the response headers: + +```bash +curl -I -X OPTIONS -H "Origin: https://echo-reality.com" \ + "https://feed.falsefinish.club/Echo%20Reality/PINK%20FLIGHT/MP3%20BOUNCE/01.%20PINK%20FLIGHT%20ATTENDANT.mp3" +``` + +The response should include the `Access-Control-Allow-Origin: https://echo-reality.com` header. \ No newline at end of file