update CORS.md
This commit is contained in:
cottongin
parent
2964a8c63e
commit
b06e25030d
113
CORS.md
113
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
|
||||
<IfModule mod_headers.c>
|
||||
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"
|
||||
</IfModule>
|
||||
|
||||
# Handle preflight OPTIONS requests
|
||||
<IfModule mod_rewrite.c>
|
||||
RewriteEngine On
|
||||
RewriteCond %{REQUEST_METHOD} OPTIONS
|
||||
RewriteRule ^(.*)$ $1 [R=200,L]
|
||||
</IfModule>
|
||||
```
|
||||
|
||||
**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
|
||||
<IfModule mod_headers.c>
|
||||
<FilesMatch "\.(mp3|mp4|wav|ogg|m4a)$">
|
||||
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"
|
||||
</FilesMatch>
|
||||
</IfModule>
|
||||
```
|
||||
|
||||
### 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
|
||||
<IfModule mod_headers.c>
|
||||
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"
|
||||
</IfModule>
|
||||
```
|
||||
|
||||
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`.
|
||||
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.
|
||||
Loading…
x
Reference in New Issue
Block a user