[SOLUCIONADO] Cross-Origin Request Blocked en Route Handlers y API Routes de Next.js

Al consumir una API creada en Next.js (utilizando el directorio App Router app/api/.../route.ts o Pages Router pages/api/...) desde una aplicación frontend externa (como una app de React Native, Flutter o un subdominio diferente), el navegador bloquea la llamada con: Access to fetch at ... from origin ... has been blocked by CORS policy: Response to preflight request doesn't pass access control check.

La Solución Paso a Paso

1. 1

   Paso 1: Manejar la petición previa OPTIONS en Next.js App Router

   Los navegadores envían una petición preliminar OPTIONS antes de cualquier POST, PUT o petición con cabeceras personalizadas. En tu archivo app/api/tu-ruta/route.js:

   JAVASCRIPT Copiar

   const corsHeaders = {
     'Access-Control-Allow-Origin': '*',
     'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
     'Access-Control-Allow-Headers': 'Content-Type, Authorization',
   };
   
   export async function OPTIONS() {
     return new Response(null, {
       status: 204,
       headers: corsHeaders,
     });
   }
   
   export async function GET(request) {
     return Response.json({ mensaje: "Éxito" }, { headers: corsHeaders });
   }
   

2. 2

   Paso 2: Configurar cabeceras CORS globales en next.config.js

   Si tienes muchas rutas API, es más limpio aplicar las cabeceras en next.config.js o next.config.mjs:

   JAVASCRIPT Copiar

   /** @type {import('next').NextConfig} */
   const nextConfig = {
     async headers() {
       return [
         {
           source: "/api/:path*",
           headers: [
             { key: "Access-Control-Allow-Credentials", value: "true" },
             { key: "Access-Control-Allow-Origin", value: "*" },
             { key: "Access-Control-Allow-Methods", value: "GET,DELETE,PATCH,POST,PUT,OPTIONS" },
             { key: "Access-Control-Allow-Headers", value: "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version, Authorization" },
           ]
         }
       ];
     }
   };
   
   module.exports = nextConfig;
   

3. 3

   Paso 3: Manejo de credenciales (Cookies y Authorization)

   Si tu aplicación envía cookies de sesión o tokens de autenticación con credentials: 'include', el comodín Access-Control-Allow-Origin: * será rechazado por los navegadores por seguridad. Debes especificar el dominio exacto:

   JAVASCRIPT Copiar

   'Access-Control-Allow-Origin': 'https://tu-dominio-cliente.com',
   'Access-Control-Allow-Credentials': 'true'
   

Preguntas Frecuentes

¿Por qué ocurre este error en producción pero funcionaba en localhost?

Porque en desarrollo local ambos proyectos compartían el puerto o se originaban en localhost, lo que relaja las políticas en ciertos navegadores, mientras que en producción los dominios son completamente distintos.

¿Puedo solucionar CORS usando un Middleware de Next.js?

Sí, creando un archivo middleware.js en la raíz que intercepte rutas /api/:path* e inyecte los encabezados CORS en cada NextResponse.