CORS Error Calling an AI API from the Browser? It's Not a Bug — Here's the Fix

1. The error, and why it's not a misconfiguration

Calling api.openai.com/v1/chat/completions or api.anthropic.com/v1/messages directly from a browser fetch() produces:

Access to fetch at 'https://api.openai.com/v1/chat/completions' from origin
'https://myapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin'
header is present on the requested resource.

Access to fetch at 'https://api.anthropic.com/v1/messages' from origin
'https://myapp.com' has been blocked by CORS policy: Response to preflight request
doesn't pass access control check.

There is no header you can add on your side to fix this — the missing header lives on OpenAI's and Anthropic's servers, and they will not add it for these endpoints. Any browser request needs an Authorization: Bearer sk-... header, and putting that key in client JS means it ships to every visitor's browser, readable in the Network tab and in the compiled bundle. Bots scrape published API keys from public sites within hours. Blocking the browser origin is the provider protecting you from an unbounded bill.

2. Anti-patterns to avoid — they don't actually fix anything

• Public CORS-proxy services (cors-anywhere, corsproxy.io, allorigins) — you'd be sending your secret API key through a third-party server you don't control. Anyone running that proxy can log every request header, including your key.
• Browser CORS-disabling extensions — only disables the check on your own machine during development. Every real user still gets blocked, and the key is still exposed the moment devtools opens.
• dangerouslyAllowBrowser: true in the OpenAI SDK — this flag exists specifically to override the SDK's built-in safety check that throws when you instantiate the client outside a server. Setting it in client code does not add security, it removes the SDK's warning about a genuinely insecure setup.

3. The correct fix — a minimal backend proxy

The browser calls your own server; your server (which never ships to the client) holds the key and calls OpenAI/Anthropic. Next.js API route:

// app/api/chat/route.ts
// Runs on the server only — process.env.OPENAI_API_KEY is never sent to the client
export async function POST(req: Request) {
  const { messages } = await req.json();

  const upstream = await fetch("https://api.openai.com/v1/chat/completions", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
    },
    body: JSON.stringify({
      model: "gpt-4o-mini",
      messages,
    }),
  });

  if (!upstream.ok) {
    return new Response(await upstream.text(), { status: upstream.status });
  }

  return new Response(upstream.body, {
    headers: { "Content-Type": "application/json" },
  });
}

Astro API route (same idea, Astro's file convention):

// src/pages/api/chat.ts
import type { APIRoute } from "astro";

export const prerender = false;

export const POST: APIRoute = async ({ request }) => {
  const { messages } = await request.json();

  const upstream = await fetch("https://api.anthropic.com/v1/messages", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "x-api-key": import.meta.env.ANTHROPIC_API_KEY,
      "anthropic-version": "2023-06-01",
    },
    body: JSON.stringify({ model: "claude-3-5-haiku-20241022", max_tokens: 1024, messages }),
  });

  return new Response(upstream.body, { status: upstream.status });
};

Cloudflare Worker:

export default {
  async fetch(request: Request, env: { OPENAI_API_KEY: string }) {
    if (request.method !== "POST") return new Response("Method not allowed", { status: 405 });
    const { messages } = await request.json();

    const upstream = await fetch("https://api.openai.com/v1/chat/completions", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${env.OPENAI_API_KEY}`,
      },
      body: JSON.stringify({ model: "gpt-4o-mini", messages }),
    });

    return new Response(upstream.body, {
      status: upstream.status,
      headers: { "Access-Control-Allow-Origin": "https://myapp.com" },
    });
  },
};

Express endpoint:

app.post("/api/chat", async (req, res) => {
  const upstream = await fetch("https://api.openai.com/v1/chat/completions", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
    },
    body: JSON.stringify({ model: "gpt-4o-mini", messages: req.body.messages }),
  });

  res.status(upstream.status);
  upstream.body.pipe(res); // Node stream pipe — forwards chunks as they arrive
});

4. Streaming through the proxy without breaking the UX

Set stream: true in the request to OpenAI/Anthropic, then hand the upstream ReadableStream straight through as your response body — don't await upstream.text() or you'll buffer the whole reply and lose token-by-token rendering:

// app/api/chat/route.ts — streaming variant
export async function POST(req: Request) {
  const { messages } = await req.json();

  const upstream = await fetch("https://api.openai.com/v1/chat/completions", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
    },
    body: JSON.stringify({ model: "gpt-4o-mini", messages, stream: true }),
  });

  // Pass the SSE stream through unmodified; the client reads it exactly
  // as it would read OpenAI's response directly.
  return new Response(upstream.body, {
    headers: {
      "Content-Type": "text/event-stream",
      "Cache-Control": "no-cache",
      Connection: "keep-alive",
    },
  });
}

On the client, read /api/chat the same way you'd read the provider's SSE stream — the only change is the URL. No buffering, no added latency beyond one extra network hop.

5. Keeping the key out of the client bundle

• Next.js: use OPENAI_API_KEY (no NEXT_PUBLIC_ prefix). Any env var prefixed NEXT_PUBLIC_ is inlined into the client bundle at build time and is public by design.
• Astro: read server-only secrets with import.meta.env only inside files under src/pages/api/ or server-rendered frontmatter with export const prerender = false; never in a <script> tag or client island.
• Vite/CRA: only variables prefixed VITE_ or REACT_APP_ reach the browser — never put an API key under one of those prefixes.
• Sanity check: after building, search the compiled output (grep -r "sk-" dist/) for your key prefix. If it shows up in any client-served file, the key is public.