CORS error calling the Sume API from a browser: the fix

You get a CORS error because a web page on your own domain can't call api.sume.com directly: the Sume API currently sends CORS headers only to Sume's own web origins, so the browser blocks the call. The fix is the one Sume's docs require anyway: keep the API key on your server, have the browser call your backend or a serverless function, and let that code call Sume.

The CORS behavior below is read from the API's server code and describes current behavior. The key rules come from Sume's Authentication page, read on 2026-09-27. How keys, scopes, and hosts work is in how Sume API keys work.

Why does the browser block my call to the Sume API?

CORS is a browser rule: a page may read a response from another origin only when that server's Access-Control-Allow-Origin header allows the page's origin. A Sume call carries an Authorization or x-api-key header, so the browser first sends an OPTIONS preflight and sends the real request only if the preflight allows it.

In current code, the Sume API checks each request's Origin header against an allowlist of Sume's own web origins. For any other origin it adds no CORS headers, so the preflight fails and your code never sees a status or a body. Browsers enforce CORS and servers don't, so the same request sent from your backend goes through.

Where can I call the Sume API from?

From anywhere the key can stay secret. The docs' safety rules decide it before CORS does:

How do I fix it with a server-side proxy?

The docs show the pattern: browser and mobile clients call your backend, and the backend attaches the Sume key from a server-side environment variable. This route handler forwards a request to avatar creation:

export async function POST(request: Request) {
  const body = await request.json();

  const response = await fetch("https://api.sume.com/v1/avatar-1.0/generate", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.SUME_API_KEY}`,
      "Content-Type": "application/json",
      "Idempotency-Key": crypto.randomUUID(),
    },
    body: JSON.stringify(body),
  });

  return new Response(await response.text(), {
    status: response.status,
    headers: { "Content-Type": "application/json" },
  });
}

What should the proxy check before it forwards?

A proxy that forwards any request lets anyone spend through your key. Treat it as your own API:

• Validate user input and enforce your own authorization before forwarding a request to Sume.
• Send exactly one key header. A gateway that adds Authorization on top of a client already sending x-api-key gets 401 unauthorized.
• Keep workspace_id, owner_user_id, and user_id out of request bodies; Sume resolves them from the key.
• Every visitor now shares your key's request budget per minute, with separate read and write budgets, so pace on the ratelimit-remaining and retry-after headers.
• Don't hold a browser request open while a video renders. Submit asynchronously and poll or take a webhook, as serverless timeouts with AI video explains.
• If a key is exposed, in a browser bundle, logs, or chat history, rotate it from the dashboard.

Can I use the TypeScript SDK in the browser instead?

No. The @sume-com/sdk client is created with your API key, so it belongs in the backend route, not in client code. The docs list its runtimes as Node 18+, Bun, Deno, and Cloudflare Workers. Embedding AI video in your product shows the full backend flow.