58 lines
2.3 KiB
Markdown
58 lines
2.3 KiB
Markdown
# Caddy Static File MIME Type & Permissions Fix
|
|
|
|
## Problem
|
|
JS/CSS files served by Caddy return `Content-Type: application/json` and the browser refuses to execute/render them. The site appears broken with missing styles and unresponsive JS.
|
|
|
|
## Root Cause
|
|
Two possible causes — check both:
|
|
|
|
### 1. File permissions (most common)
|
|
Caddy runs as the `caddy` user (not root). If static files have permissions `600` (root-only), Caddy returns **HTTP 403 Forbidden**. The browser silently fails to load JS/CSS — no console error in some browsers.
|
|
|
|
**Fix:** `chmod 644 /path/to/static/files/*.js /path/to/static/files/*.css`
|
|
|
|
**Check:** `curl -sI https://ops.itpropartner.com/js/app.js | grep -i content-type`
|
|
Expected: `content-type: text/javascript; charset=utf-8`
|
|
Broken: `content-type: application/json` or HTTP 403
|
|
|
|
### 2. Caddy `handle_path` nested inside another block
|
|
If a `handle_path /js/*` or `handle_path /css/*` block is accidentally nested inside another `handle_path /data/*` block (or any other block), it will only match URLs that start with the outer path first. E.g. `/js/app.js` won't match `handle_path /data/* { handle_path /js/* { ... } }` because `/js/` doesn't start with `/data/`.
|
|
|
|
**Fix:** Ensure all static file `handle_path` blocks are at the TOP LEVEL of the site config, not nested inside other blocks.
|
|
|
|
```caddy
|
|
ops.itpropartner.com {
|
|
handle_path /data/* {
|
|
root * /var/www/ops/data/
|
|
file_server
|
|
}
|
|
handle_path /js/* { # ← TOP LEVEL, not nested
|
|
root * /opt/ops-portal/static/js
|
|
file_server
|
|
}
|
|
handle_path /css/* { # ← TOP LEVEL, not nested
|
|
root * /opt/ops-portal/static/css
|
|
file_server
|
|
}
|
|
reverse_proxy 127.0.0.1:8090
|
|
}
|
|
```
|
|
|
|
## Verification
|
|
```bash
|
|
# JS MIME type
|
|
curl -sI https://ops.itpropartner.com/js/app.js | grep -i content-type
|
|
# Must show: text/javascript; charset=utf-8
|
|
|
|
# CSS MIME type
|
|
curl -sI https://ops.itpropartner.com/css/ops.css | grep -i content-type
|
|
# Must show: text/css; charset=utf-8
|
|
|
|
# HTTP status
|
|
curl -sS -o /dev/null -w '%{http_code}\n' https://ops.itpropartner.com/js/app.js
|
|
# Must show: 200
|
|
```
|
|
|
|
## Related
|
|
- Backend FastAPI `FileResponse` may also return wrong MIME types. Fixed by adding `media_type` parameter: `FileResponse(..., media_type="application/javascript")`. But the Caddy `file_server` approach is more reliable.
|