Browser Fetch and CORS

FULL_STACK_DEVELOPER_2026_COMPLETE - Phase 06 Browser Fetch and CORS

VOLUME 02 - FRONTEND + BACKEND FOUNDATIONS

Browser Fetch and CORS Client Component -> NestJS and the browser security boundary

Phase 06 turns two working applications into one full-stack system.

Browser Next.js NestJS API

http://localhost:3000 apps/web http://localhost:4000

HTTP fetch

Later phases replace in-memory Todos with Prisma + PostgreSQL.

Figure - TaskFlow Phase 06 architecture. The browser sees Next.js on port 3000 while the independent NestJS API listens on port 4000.

Book 4 of Phase 06

FULL_STACK_DEVELOPER_2026_COMPLETE - Phase 06 Browser Fetch and CORS

Second connection: let browser JavaScript call NestJS Now we intentionally move the request into a Client Component. The browser page is served from port 3000 while the API is on port 4000. Those are different origins, so the browser begins enforcing Cross-Origin Resource Sharing rules.

Browser Origin GET /todos API Origin

http://localhost:3000 http://localhost:4000

different port = different origin

Browser checks Nest CORS config

response CORS headers allowed origins

If the server does not grant the browser origin, JavaScript cannot read the cross-origin response.

Figure - CORS is permission communicated through HTTP headers and enforced by browsers. It is not a replacement for authentication or authorization.

What counts as an origin? Origin mental model

origin = scheme + host + port

http://localhost:3000 http://localhost:4000 <- different port, different origin http://127.0.0.1:3000 <- different host from localhost

Enable only the frontend origins we need apps/api/src/main.ts - before app.listen(...)

app.enableCors({ origin: [ 'http://localhost:3000', 'http://127.0.0.1:3000', ], });

NestJS exposes enableCors() on the application object. With the Fastify platform, Nest uses the platform-appropriate CORS integration under the hood. The important part for the learner is the policy: the API tells browsers which origins may read cross-origin responses.

CORS IS NOT AUTH

FULL_STACK_DEVELOPER_2026_COMPLETE - Phase 06 Browser Fetch and CORS

Allowing http://localhost:3000 through CORS does not prove who the user is, does not protect a Todo from another authenticated user, and does not make the API private. Authentication and authorization arrive later.

Temporary Client Component apps/web/src/app/todos-browser/browser-todos.tsx

'use client';

import { useEffect, useState } from 'react';
import { fetchTodos, type Todo } from '@/lib/api/todos';

export function BrowserTodos() {
const [todos, setTodos] = useState<Todo[]>([]);
const [error, setError] = useState<string | null>(null);

useEffect(() => { const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL; if (!baseUrl) { setError('NEXT_PUBLIC_API_BASE_URL is not configured'); return; }

fetchTodos(baseUrl).then(setTodos).catch((err: unknown) => { setError(err instanceof Error ? err.message : 'Unknown error'); }); }, []);

if (error) return <p role="alert">{error}</p>; return <ul>{todos.map((todo) => <li key={todo.id}>{todo.title}</li>)}</ul>; }

EDUCATIONAL SCAFFOLDING

This useEffect data-fetching example is intentionally temporary. Later, TanStack Query will own browser server-state fetching, caching, retries and mutation synchronization. We use raw fetch now so the network mechanics remain visible.

How to verify CORS instead of guessing 1 Temporarily comment out app.enableCors(...) and restart the API. 2 Open the browser route that performs the client fetch. 3 Use DevTools -> Network and Console. Observe that the API may receive a request while browser JavaScript is prevented from using a disallowed response. 4 Restore the exact development-origin CORS policy and retry. 5 Confirm the response is readable by the Client Component.

Official source notes Primary framework references: Next.js App Router Fetching Data and fetch API documentation; Next.js Environment Variables documentation; NestJS CORS documentation. Browser protocol references: MDN CORS, preflight request, and Fetch API documentation.

The course remains version-locked to the versions established in Phase 00. These sources are used to verify concepts and current API behavior, not to silently upgrade the course midstream.