Skip to content
Optimal Lab

Frontend · interactive

CORS

Your app at app.example.com fetches from api.partner.com. Browsers block scripts from reading responses from another origin unless that server opts in with CORS headers. For anything beyond a simple request, the browser asks first with a preflight.

  1. Browser → api.partner.com

    GET /orders Origin: https://app.example.com

  2. api.partner.com → browser

    200 OK [data] (no Access-Control-Allow-Origin)

TypeError: Failed to fetch (CORS)

Request reached the server: yes

The request reached the server and it answered, but the browser refuses to hand the response to your JavaScript. CORS limits reading, not sending.

Scenario

Step 4 of 4

  1. 1

    Same-origin policy

    Scripts can only read responses from their own scheme + host + port, unless the other side allows it.

    Protects users' logged-in sessions on other sites.

  2. 2

    The server names allowed origins

    Access-Control-Allow-Origin with your exact origin (or * for public, cookieless APIs).

    Credentials require an exact origin.

  3. 3

    Preflights for JSON, PUT, custom headers

    The browser sends OPTIONS first. The server must answer with the allowed methods and headers.

    Access-Control-Max-Age: 600 caches it

  4. 4

    CORS isn't server security

    curl and servers ignore it. It controls what browsers let pages read. Protect APIs with auth.

    Fix it on the server, or proxy through your own origin.

In production

Tools and technologies

Cross-origin requests are governed by CORS in every browser.

Not tied to one language — use these names when you search docs or design a system.