# Browser: Access to fetch at 'https://api.example.com/api/data' from origin 'https://app.example.com' has been blocked by CORS policy (Next.js route handler)

**Code:** `CORS error calling Next.js API route / route handler` · **Category:** Next.js · **Seen on:** Next.js, JavaScript

A cross-origin request to your Next.js API route is blocked because the response lacks CORS headers.

## Meaning

Next.js doesn't add CORS headers by default. Add them in the route handler (including an `OPTIONS` handler for preflight), via `headers()` in `next.config.js`, or in middleware. Never use `*` with credentials. Same-origin calls from your own pages don't need CORS.

## Common causes

- No `Access-Control-Allow-Origin` header
- Missing OPTIONS handler for preflight
- Credentials with wildcard origin
- Middleware redirecting preflight
- Different origin domain/port

## Quick fix

1. Add headers in `next.config.js` `headers()` for `/api/:path*`
2. Export `OPTIONS` and return the CORS headers
3. Use specific origins instead of `*` when sending cookies

## Detailed fix by platform

### Next.js

1. `export async function OPTIONS() { return new Response(null, { status: 204, headers: { "Access-Control-Allow-Origin": "https://app.example.com", "Access-Control-Allow-Methods": "GET,POST,OPTIONS", "Access-Control-Allow-Headers": "Content-Type" } }); }`

## How to diagnose

1. **Origin** — Allowed?
2. **Preflight** — OPTIONS handled?
3. **Credentials** — Wildcard conflict?

---
Source: [WhatIsMyError](https://whatismyerror.com/errors/nextjs/cors-api-route-next)