Replicate API from browser JavaScript

Why the browser blocks api.replicate.com

Probes sent on 28 October 2026 from Origin: https://example.com:

• The preflight for POST https://api.replicate.com/v1/models/black-forest-labs/flux-schnell/predictions answered 200 without Access-Control-Allow-Origin.
• The POST itself with a test token answered 401 (application/problem+json) without Access-Control-Allow-Origin.
• GET https://api.replicate.com/v1/predictions/{id} also answered 401 without Access-Control-Allow-Origin.

With no Access-Control-Allow-Origin on any of them, the browser blocks every call before your script can read the status or the body. Your code only sees TypeError: Failed to fetch.

What the free proxy does with Replicate

The free tier at https://proxy.cors.dev/ needs no signup or key and allows about 600 requests a minute per IP, but only GET and HEAD. A POST https://proxy.cors.dev/https://api.replicate.com/... answers 405 method_not_allowed with Allow: GET, HEAD, OPTIONS, and an Authorization header answers 400 header_not_allowed.

A GET for a prediction through the free proxy, without a token, returns Replicate's 401 with CORS headers attached. Your code can read that error, but it is useless without the token, and the free tier will not forward one in a header.

Create and poll a prediction through cors.dev Pro

1. Create a Connection

   sign in at cors.dev with Google, start the 7-day trial (1,000 requests, no card) or cors.dev Pro ($5 a month for 500,000 requests), and create a Connection that lists your exact page origins and api.replicate.com. Its key goes in X-Cors-Key: a publishable identifier that only works from those origins. A wrong key answers 401 invalid_key.

2. Start the prediction

   POST to https://proxy.cors.dev/https://api.replicate.com/v1/models/{owner}/{name}/predictions with {"input": {...}} for official models, or to /v1/predictions with {"version": ..., "input": {...}} for others, sending X-Cors-Key, Content-Type and Authorization: Bearer r8_.... The preflight answered 204 and allows GET, HEAD, POST, PUT, PATCH and DELETE. Bodies are capped at 1 MiB, so pass large input files as URLs.

3. Poll until it finishes

   read id, status and urls.get from the response, then poll GET /v1/predictions/{id} through the proxy until status moves from starting or processing to succeeded, failed, canceled, or aborted. When black-forest-labs/flux-schnell succeeds, output comes back as an array of image URLs.

const PROXY = 'https://proxy.cors.dev/';
const CORS_KEY = 'YOUR_CONNECTION_KEY'; // publishable, works only from your registered origins

async function replicate(path, token, init = {}) {
  const res = await fetch(PROXY + 'https://api.replicate.com/v1/' + path, {
    ...init,
    headers: {
      'X-Cors-Key': CORS_KEY,
      Authorization: `Bearer ${token}`,
      'Content-Type': 'application/json',
    },
  });
  if (!res.ok) {
    throw new Error(`HTTP ${res.status}: ${res.headers.get('X-Cors-Error') ?? (await res.text())}`);
  }
  return res.json();
}

async function generate(prompt, token) {
  let prediction = await replicate('models/black-forest-labs/flux-schnell/predictions', token, {
    method: 'POST',
    body: JSON.stringify({ input: { prompt } }),
  });

  while (!['succeeded', 'failed', 'canceled', 'aborted'].includes(prediction.status)) {
    await new Promise((resolve) => setTimeout(resolve, 1500));
    prediction = await replicate(`predictions/${prediction.id}`, token);
  }

  if (prediction.status !== 'succeeded') throw new Error(prediction.error ?? prediction.status);
  return prediction.output;
}

const userToken = prompt('Your Replicate API token');
const [imageUrl] = await generate('a red bicycle', userToken);

Every poll is one proxied request and counts against your cors.dev allowance. cors.dev Pro allows 3,000 requests a minute per account and 100 in flight; the trial allows 600 a minute and 10 in flight. Proxy errors arrive in the X-Cors-Error header:

• invalid_key or origin_not_allowed: check X-Cors-Key and the Connection's origins; scheme, host and port must match exactly.
• target_not_allowed: enable api.replicate.com on the Connection.
• request_too_large: the body is over 1 MiB.
• upstream_timeout: Replicate took longer than the 30-second deadline.
• rate_limited or quota_exceeded: a 429; wait for Retry-After, which your code can read.

Skip sync mode and poll

Replicate's sync mode, the Prefer: wait header, holds the create request open until the prediction finishes: 60 seconds by default, or Prefer: wait=n with n from 1 to 60. cors.dev ends every upstream request after 30 seconds, on the free tier and on Pro, so do not depend on sync mode through the proxy. Create the prediction and poll; the Cancel-After header sets a prediction deadline from 5 seconds to 24 hours.

Replicate's docs suggest polling every 1 to 2 seconds until the prediction succeeds or fails. Replicate's own rate limits are 600 requests a minute for creating predictions and 3,000 a minute for all other endpoints; excess requests get 429.

What each status means for the polling loop:

• starting: the model is booting; if this lasts more than a few seconds, a new worker is usually cold-booting. Keep polling.
• processing: the model is running. Keep polling; predictions time out after 30 minutes of running.
• succeeded: read output.
• failed: read error.
• canceled: cancelled by you, or past its Cancel-After deadline after it started.
• aborted: past its deadline before it started; Replicate does not charge for it.

To stop a prediction early, send POST /v1/predictions/{id}/cancel through the same proxy route. Replicate can also POST results to a webhook URL, but that needs an HTTPS server to receive it, so browser code polls.

Output files on replicate.delivery

Generated files are served from replicate.delivery, not api.replicate.com. On 28 October 2026 a sample output, https://replicate.delivery/.../out-0.webp, answered 200 with Access-Control-Allow-Origin: *, and its preflight allowed GET. Fetch outputs directly, no proxy needed, or put the URL in an <img> tag.

For predictions made through the API, Replicate deletes inputs, outputs, and logs after one hour. If you want to keep an output file, download it before that hour is up.

async function keepOutput(outputUrl) {
  const res = await fetch(outputUrl);
  if (!res.ok) throw new Error(`Output HTTP ${res.status}`);
  return URL.createObjectURL(await res.blob());
}

const img = document.createElement('img');
img.alt = 'Generated image';
img.src = await keepOutput(imageUrl);
document.body.append(img);

What Replicate costs

Replicate's pricing page, checked 28 October 2026, bills some official models per output image and other models per second of hardware time:

Public models bill only active processing time, while setup and idle time are free. You can also run select models free before Replicate asks you to set up billing.

Keep your token out of shipped code

Replicate tokens start with r8_ and act on your account and billing. Any key in browser code, in a query string or a header, is visible to every visitor in DevTools; neither cors.dev nor X-Cors-Key hides or protects it.

Keep your own production token on a backend. Calling Replicate from the browser through cors.dev Pro fits internal tools, prototypes and apps where each user pastes their own token (bring your own key).

Good questions.