remotion-dev/remotion · error · TypeError

Failed to read from ${src}: ${error.message}. Does the resou

Error message

Failed to read from ${src}: ${error.message}. Does the resource support CORS?

What it means

Thrown by fetchWithCorsCatch when the underlying fetch fails with a browser-specific cross-origin/CORS-style message ('Failed to fetch' on Chrome, 'Load failed' on Safari, 'NetworkError when attempting to fetch resource' on Firefox). The wrapper re-wraps these opaque messages into a TypeError that explicitly names the src and asks whether CORS is supported, since the original error reveals nothing about cross-origin policy.

Source

Thrown at packages/media-utils/src/fetch-with-cors-catch.ts:19

export const fetchWithCorsCatch = async (src: string, init?: RequestInit) => {
	try {
		const response = await fetch(src, {
			mode: 'cors',
			referrerPolicy: 'no-referrer-when-downgrade',
			...init,
		});
		return response;
	} catch (err) {
		const error = err as Error;
		if (
			// Chrome
			error.message.includes('Failed to fetch') ||
			// Safari
			error.message.includes('Load failed') ||
			// Firefox
			error.message.includes('NetworkError when attempting to fetch resource')
		) {
			throw new TypeError(
				`Failed to read from ${src}: ${error.message}. Does the resource support CORS?`,
			);
		}

		throw err;
	}
};

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Configure the media origin to send Access-Control-Allow-Origin: * (or your page origin) and allow the relevant methods/headers.
2. If you cannot change the origin, proxy the request through your own same-origin server or use a CORS proxy.
3. Confirm the URL is reachable and same-scheme (avoid https page loading http media).

Example fix

// before - serving media without CORS
// Origin: https://app.example.com loads https://cdn.example.com/video.mp4

// after - cdn response headers
Access-Control-Allow-Origin: *

// Probe CORS support with a HEAD before the real fetch
async function corsOk(url: string): Promise<boolean> {
  try { const r = await fetch(url, { method: 'HEAD', mode: 'cors' }); return r.ok || r.type === 'cors'; } catch { return false; }
}
await corsOk(src);

try { return await fetchWithCorsCatch(src, init); } catch (e) { if (/Does the resource support CORS/.test(String((e as Error).message))) { return await fetchWithCorsCatch(proxyUrl(src), init); } throw e; }

When it happens

Trigger: Fetching a media resource whose server does not return Access-Control-Allow-Origin matching the page origin, or where the resource is unreachable (DNS, offline, mixed content). The browser masks the reason as a generic network failure, which this wrapper recognizes and attributes to CORS.

Common situations: Loading remote media from a CDN/bucket without CORS headers. Switching from http to https (mixed content). Self-hosted media server without permissive CORS. Local dev hitting a different-origin asset without proxying.

Related errors

• Failed to render GIF with source ${src}: "${error.message}".
• Failed to render GIF with source ${src}: "${error.message}".
• Failed to fetch audio data from ${src}: ${response.status} $
• Got no body
• Failed to render GIF with source ${src}: "${error.message}".

AI-assisted analysis of remotion-dev/remotion@78fe4bb3fd (2026-08-12). Data as JSON: /api/errors/a07057834c20346b. Report an issue: GitHub.