Mannu
a3a0ddf3c9
pub-xxx.r2.dev returns 503 for cross-origin sub-resource requests (img tags, fetch) due to Cloudflare Bot Management on the r2.dev dev domain. Direct browser navigation works but programmatic loading fails, so all uploaded images appeared as placeholders after upload. Fix: route all image display through a same-origin /api/img?key=... proxy that fetches from R2 via the S3 API server-side. API responses (profile, children, memories) now return proxy URLs. After upload, UI state is updated with proxy URLs directly rather than raw R2 URLs. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
22 lines
725 B
TypeScript
22 lines
725 B
TypeScript
/**
|
|
* Converts a direct R2 public URL to a same-origin proxy URL.
|
|
* Used in API responses so <img> tags load via /api/img instead of
|
|
* pub-xxx.r2.dev (which returns 503 for cross-origin sub-resource requests
|
|
* due to Cloudflare Bot Management on the r2.dev domain).
|
|
*/
|
|
|
|
function getR2BaseUrl() {
|
|
const pub = process.env.R2_PUBLIC_URL;
|
|
const id = process.env.R2_ACCOUNT_ID;
|
|
return pub || `https://pub-${id}.r2.dev`;
|
|
}
|
|
|
|
export function toProxyUrl(r2Url: string | null | undefined): string | null {
|
|
if (!r2Url) return null;
|
|
const base = getR2BaseUrl();
|
|
if (r2Url.startsWith(base + "/")) {
|
|
const key = r2Url.slice(base.length + 1);
|
|
return `/api/img?key=${encodeURIComponent(key)}`;
|
|
}
|
|
return r2Url;
|
|
}
|