"The request works in Postman but the browser blocks it" is CORS; "the cookie is set but not sent" is SameSite; "the user is logged in on the server render but not after hydration" is credentials during SSR. These three come up in almost every fullstack interview because every team has lost a day to them.

Know

• fetch semantics: the promise resolves as soon as headers arrive and does not reject on 4xx/5xx (check response.ok/status); it rejects on network failure, CORS blocks and aborts. Bodies are read once (json(), text(), formData(), arrayBuffer(), or body as a stream). Options: method, headers, body, signal (AbortController), credentials (same-origin default, include, omit), mode (cors default, same-origin, no-cors → opaque response), cache (default, no-store, reload, no-cache, force-cache), redirect, keepalive (outlives the page, for beacons, 64 KB limit), priority. ofetch (Nuxt's $fetch) adds JSON handling, throwing on error status, retries and interceptors.
• Same-origin policy: an origin is scheme + host + port. Scripts can send cross-origin requests (forms and images always could) but cannot read cross-origin responses unless the server opts in with CORS. Embedding (<img>, <script>, <iframe>) is allowed; reading is not.
• CORS: the browser sends Origin; the server answers Access-Control-Allow-Origin (a specific origin, or * which is incompatible with credentials), Access-Control-Allow-Credentials: true to allow cookies, Access-Control-Expose-Headers for non-safelisted response headers. Preflight (OPTIONS with Access-Control-Request-Method/-Headers) happens for non-simple requests: methods other than GET/HEAD/POST, custom headers such as Authorization, or Content-Type: application/json (only form types are simple); Access-Control-Allow-Methods/-Headers and Access-Control-Max-Age answer it. Redirects and missing Vary: Origin are classic causes of intermittent failures.
• CORS protects the user's data in the browser, not the server. A server that relies on CORS for authorisation is open to curl; authentication, CSRF protection and input validation are separate. mode: 'no-cors' yields an opaque response you cannot read and is rarely what you want.
• Cross-origin isolation: Cross-Origin-Opener-Policy, Cross-Origin-Embedder-Policy and Cross-Origin-Resource-Policy isolate a page from other origins (required for SharedArrayBuffer and high-resolution timers); the crossorigin attribute on <script>/<img> requests CORS mode so error details and canvas reads are allowed; integrity adds subresource integrity.
• Cookies: set with Set-Cookie: name=value; Max-Age=...; Path=/; Domain=...; Secure; HttpOnly; SameSite=Lax. Secure: HTTPS only. HttpOnly: invisible to document.cookie (session cookies always). SameSite: Strict (never on cross-site requests, including top-level navigation from a link), Lax (default in Chromium; sent on top-level GET navigations, not on cross-site POST or subresources), None (cross-site allowed; requires Secure). Prefixes: __Host- (Secure, no Domain, Path=/) and __Secure-. Partitioned (CHIPS) for third-party cookies keyed by top-level site. Limits: ~4 KB each, a few hundred per domain, sent on every matching request (keep them small). Expires/Max-Age for persistence; session cookies without them.
• Third-party cookies are blocked by Safari and Firefox and remain under user choice in Chrome after Google abandoned default deprecation (verify current status); design around them with first-party cookies, CHIPS, or server-side integration.
• Cookies and CSRF: because cookies are attached automatically, a cross-site form post can carry the victim's session; SameSite=Lax/Strict mitigates most of it, and token or origin-header checks close the rest (the security section covers it).
• In Nuxt: useCookie(name, options) reads and writes on both sides; on the server getCookie/setCookie/deleteCookie from h3; SSR fetches do not carry the browser's cookies unless you forward them (useRequestFetch(), useRequestHeaders(['cookie'])); the Cookie Store API (cookieStore) enables change events, which Nuxt's experimental.cookieStore uses to keep useCookie refs in sync.
• Sending data on unload: navigator.sendBeacon() or fetch(url, { keepalive: true }) from visibilitychange/pagehide, never unload (which also breaks bfcache).

How it works

Reading a CORS failure from the wire:

OPTIONS /api/orders HTTP/1.1
Origin: https://shop.example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type, authorization

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://shop.example.com
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, PATCH, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 600
Vary: Origin

Missing Vary: Origin with several allowed origins means a CDN can cache the response for origin A and serve it to origin B, which then fails. Allow-Origin: * with credentials: 'include' fails outright.

CORS in Nitro for a public API, and cookie handling on both sides of a Nuxt app:

export default defineNuxtConfig({
  routeRules: {
    '/api/public/**': { cors: true, headers: { 'access-control-allow-origin': 'https://partner.example.com', 'access-control-allow-credentials': 'true', 'vary': 'Origin' } },
  },
})

export default defineEventHandler(async (event) => {
  const user = await authenticate(await readBody(event))
  setCookie(event, '__Host-session', await seal(user), {
    httpOnly: true,   // invisible to scripts: XSS cannot read it
    secure: true,     // HTTPS only (required by the __Host- prefix)
    sameSite: 'lax',  // sent on top-level navigations, not on cross-site POSTs
    path: '/',
    maxAge: 60 * 60 * 24 * 7,
  })
  return { ok: true }
})

// Forward the incoming cookie during SSR so the API sees the same session as the page.
export function useApi() {
  const headers = import.meta.server ? useRequestHeaders(['cookie']) : undefined
  return $fetch.create({ baseURL: '/api', headers, credentials: 'include' })
}

// A preference cookie the server can read for the first render; not HttpOnly because the client writes it.
export const useConsent = () => useCookie<'granted' | 'denied' | null>('consent', {
  default: () => null,
  sameSite: 'lax',
  secure: true,
  maxAge: 60 * 60 * 24 * 180,
})

Beacons that survive navigation without blocking bfcache:

export default defineNuxtPlugin(() => {
  document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'hidden') {
      navigator.sendBeacon('/api/telemetry/session', JSON.stringify({ path: location.pathname, at: Date.now() }))
    }
  })
})

Exercise

Be able to say