node http_error ai_generated true

Access to fetch has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header

ID: node/cors-blocked

Also available as: JSON · Markdown
92%Fix Rate
92%Confidence
50Evidence
2023-01-01First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
20 active — — —

Root Cause

Browser blocks cross-origin request. Server must send correct CORS headers.

generic

Workarounds

  1. 95% success Add CORS headers on the server: Access-Control-Allow-Origin 
    // Express: app.use(cors())
// or: res.setHeader('Access-Control-Allow-Origin', '*')

    Sources: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

  2. 90% success Use a proxy in development: Next.js rewrites, Vite proxy, or CRA proxy 
    Next.js rewrites, Vite proxy, or CRA proxy

    Sources: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

  3. 85% success For APIs you don't control, use a server-side proxy to make the request 
    // Create a server-side API route to proxy the external request:
// /api/proxy.js:
const resp = await fetch('https://external-api.com/data');
const data = await resp.json();
res.json(data);

    Sources: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Dead Ends

Common approaches that don't work:

  1. Disable CORS in the browser 80% fail

    Only works for development — can't ask users to disable CORS

  2. Use no-cors mode in fetch 85% fail

    Response becomes opaque — you can't read the data

Error Chain

Frequently confused with: