Handling CORS errors with external APIs in V0

Why CORS errors happen in V0 apps

CORS (Cross-Origin Resource Sharing) is a browser security policy that blocks client-side JavaScript from making requests to a different domain unless that domain explicitly allows it. V0 generates fetch calls directly from React components — which run in the browser — to external APIs. If the external API does not return Access-Control-Allow-Origin headers permitting your V0 domain, the browser blocks the response. This problem is especially confusing because the same API call works perfectly in V0's Vercel Sandbox preview (which may proxy requests differently) but fails after deployment. The solution in Next.js is straightforward: move the fetch call to a server-side API route where CORS does not apply.

• V0 generates fetch calls to external APIs directly in client components where CORS applies
• External API does not include Access-Control-Allow-Origin header for your V0 deployment domain
• V0 preview sandbox may proxy requests differently than the production deployment
• Browser preflight OPTIONS request fails because the external API does not handle it
• API keys are passed in client-side headers, triggering CORS preflight for non-simple requests

Error messages you might see

Before you start

• A V0 project that calls an external API from client-side code and receives CORS errors
• Access to the V0 editor or exported project code
• API keys stored in the V0 Vars panel (not hardcoded in client code)

How to fix it

// Client component — CORS error
"use client"
export default function WeatherWidget() {
  async function fetchWeather() {
    const res = await fetch(
      `https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_KEY`
    )
    const data = await res.json()
  }
}

// app/api/weather/route.ts — Server-side proxy
import { NextResponse } from "next/server"
export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const city = searchParams.get("city") || "London"
  const res = await fetch(
    `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${process.env.WEATHER_API_KEY}`
  )
  if (!res.ok) {
    return NextResponse.json(
      { error: "Failed to fetch weather" },
      { status: res.status }
    )
  }
  const data = await res.json()
  return NextResponse.json(data)
}

const res = await fetch(
  `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_KEY`
)

const res = await fetch(`/api/weather?city=${encodeURIComponent(city)}`)

export async function GET() {
  const data = await getData()
  return NextResponse.json(data)
}

export async function GET() {
  const data = await getData()
  const response = NextResponse.json(data)
  response.headers.set("Access-Control-Allow-Origin", "https://your-other-app.vercel.app")
  response.headers.set("Access-Control-Allow-Methods", "GET, POST, OPTIONS")
  response.headers.set("Access-Control-Allow-Headers", "Content-Type, Authorization")
  return response
}
export async function OPTIONS() {
  return new NextResponse(null, {
    status: 204,
    headers: {
      "Access-Control-Allow-Origin": "https://your-other-app.vercel.app",
      "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
      "Access-Control-Allow-Headers": "Content-Type, Authorization",
    },
  })
}

1// middleware.ts
2import { NextResponse } from "next/server"
3import type { NextRequest } from "next/server"
4
5const allowedOrigins = [
6  "https://your-other-app.vercel.app",
7  "http://localhost:3000",
8]
9
10export function middleware(request: NextRequest) {
11  const origin = request.headers.get("origin") || ""
12  const isAllowed = allowedOrigins.includes(origin)
13
14  if (request.method === "OPTIONS") {
15    return new NextResponse(null, {
16      status: 204,
17      headers: {
18        "Access-Control-Allow-Origin": isAllowed ? origin : "",
19        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
20        "Access-Control-Allow-Headers": "Content-Type, Authorization",
21        "Access-Control-Max-Age": "86400",
22      },
23    })
24  }
25
26  const response = NextResponse.next()
27  if (isAllowed) {
28    response.headers.set("Access-Control-Allow-Origin", origin)
29  }
30  return response
31}
32
33export const config = {
34  matcher: "/api/:path*",
35}

Complete code example

1import { NextResponse } from "next/server"
2
3const ALLOWED_APIS: Record<string, string> = {
4  weather: "https://api.openweathermap.org/data/2.5",
5  github: "https://api.github.com",
6}
7
8export async function GET(request: Request) {
9  const { searchParams } = new URL(request.url)
10  const service = searchParams.get("service")
11  const path = searchParams.get("path")
12
13  if (!service || !path || !ALLOWED_APIS[service]) {
14    return NextResponse.json(
15      { error: "Invalid service or path" },
16      { status: 400 }
17    )
18  }
19
20  const apiUrl = `${ALLOWED_APIS[service]}${path}`
21  const apiKey = process.env[`${service.toUpperCase()}_API_KEY`]
22
23  try {
24    const headers: Record<string, string> = {
25      "Content-Type": "application/json",
26    }
27    if (apiKey) {
28      headers["Authorization"] = `Bearer ${apiKey}`
29    }
30
31    const response = await fetch(apiUrl, { headers })
32
33    if (!response.ok) {
34      return NextResponse.json(
35        { error: `API returned ${response.status}` },
36        { status: response.status }
37      )
38    }
39
40    const data = await response.json()
41    return NextResponse.json(data)
42  } catch (error) {
43    return NextResponse.json(
44      { error: "Failed to reach external API" },
45      { status: 502 }
46    )
47  }
48}
49
50export async function POST(request: Request) {
51  const { searchParams } = new URL(request.url)
52  const service = searchParams.get("service")
53  const path = searchParams.get("path")
54
55  if (!service || !path || !ALLOWED_APIS[service]) {
56    return NextResponse.json(
57      { error: "Invalid service or path" },
58      { status: 400 }
59    )
60  }
61
62  const body = await request.json()
63  const apiUrl = `${ALLOWED_APIS[service]}${path}`
64  const apiKey = process.env[`${service.toUpperCase()}_API_KEY`]
65
66  const headers: Record<string, string> = {
67    "Content-Type": "application/json",
68  }
69  if (apiKey) {
70    headers["Authorization"] = `Bearer ${apiKey}`
71  }
72
73  const response = await fetch(apiUrl, {
74    method: "POST",
75    headers,
76    body: JSON.stringify(body),
77  })
78
79  const data = await response.json()
80  return NextResponse.json(data, { status: response.status })
81}

Best practices to prevent this

• Always route external API calls through Next.js API routes to avoid CORS entirely
• Never store API keys in client-side code — keep them in the V0 Vars panel and access via process.env in API routes
• Handle the OPTIONS preflight method explicitly when adding CORS headers to your own API routes
• Whitelist specific origins instead of using Access-Control-Allow-Origin: * in production
• Validate and sanitize the external API URL in your proxy route to prevent server-side request forgery (SSRF)
• Add error handling in your proxy route so external API failures return meaningful error messages to the client
• Use Access-Control-Max-Age to cache preflight responses and reduce redundant OPTIONS requests
• Test CORS behavior after deploying to Vercel, since V0 preview may handle requests differently

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns

Explore related guides

Guides from other topics that help with this issue