CORS: Cross-Origin Resource Sharing

When your frontend tries to fetch data from a different domain, the browser might block the request and show a CORS error in the console.

This article explains what CORS is, why it exists, and how to fix it.

• The Same-Origin Policy
• What Is CORS
• Preflight Requests
• Common CORS Errors
• How to Configure CORS

The Same-Origin Policy

CORS exists because of the Same-Origin Policy.

The Same-Origin Policy is a browser security rule that restricts web pages from making requests to a different origin. Two URLs share the same origin only if all three of these match:

• Protocol: http vs. https
• Domain: example.com vs. api.example.com
• Port: :3000 vs. :8080

If any one of these differs, it's a cross-origin request.

The Same-Origin Policy protects users from malicious sites stealing data from other sites they're logged into.

What Is CORS

CORS (Cross-Origin Resource Sharing) is an HTTP mechanism that lets servers explicitly declare which origins they allow cross-origin requests from.

When a browser sends a cross-origin request, it automatically includes an Origin header:

Origin: https://example.com

If the server allows that origin, it responds with:

Access-Control-Allow-Origin: https://example.com

Or to allow any origin:

Access-Control-Allow-Origin: *

If the response doesn't include Access-Control-Allow-Origin, or the origin isn't on the allowed list, the browser blocks the response and logs a CORS error.

Important: CORS is enforced by the browser, not the server. The server received and processed the request; the browser is simply preventing your JavaScript from reading the response.

Preflight Requests

Not all cross-origin requests go straight through. For certain types of requests, the browser first sends a preflight request, an OPTIONS request, to check whether the server will allow the actual request.

Simple Requests (no preflight)

Requests that meet all of these criteria go directly, with no preflight:

• Method is GET, POST, or HEAD
• Content-Type is application/x-www-form-urlencoded, multipart/form-data, or text/plain
• No custom headers

Non-Simple Requests (preflight required)

These trigger a preflight:

• Method is PUT, DELETE, or PATCH
• Content-Type is application/json
• Custom headers are present (e.g. Authorization)

The preflight looks like this:

OPTIONS /api/users HTTP/1.1
Origin: https://example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type, Authorization

The server responds:

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 86400

Access-Control-Max-Age tells the browser how long (in seconds) it can cache the preflight result, avoiding a preflight on every single request.

Common CORS Errors

Missing Access-Control-Allow-Origin

Access to fetch at 'https://api.example.com' from origin 'https://example.com'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header
is present on the requested resource.

Cause: The server hasn't configured CORS headers. Fix: Add Access-Control-Allow-Origin to the server response.

Origin Not Allowed

Access to fetch at 'https://api.example.com' from origin 'https://other.com'
has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header
has a value 'https://example.com' that is not equal to the supplied origin.

Cause: The server allows a specific origin, but the request came from a different one. Fix: Add the requesting origin to the server's allowed list.

Preflight Failed

Method DELETE is not allowed by Access-Control-Allow-Methods

Cause: The method isn't included in Access-Control-Allow-Methods. Fix: Add the required method to the server's CORS configuration.

How to Configure CORS

CORS must be configured on the server. There's no way to fix a CORS error purely from the frontend.

Node.js / Express

const cors = require('cors');

// allow all origins
app.use(cors());

// allow a specific origin
app.use(cors({
  origin: 'https://example.com',
}));

// allow multiple origins
app.use(cors({
  origin: ['https://example.com', 'https://app.example.com'],
}));

Dev Environment Workaround

If you can't modify the backend during development, you can proxy requests through your dev server to avoid CORS:

Vite

// vite.config.js
export default {
  server: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
      },
    },
  },
};

Angular CLI

// proxy.conf.json
{
  "/api": {
    "target": "https://api.example.com",
    "changeOrigin": true
  }
}

The proxy only works in development. In production, the server still needs proper CORS configuration.

Summary

• The Same-Origin Policy is a browser security rule that restricts cross-origin requests
• CORS lets servers declare which origins they'll accept requests from
• CORS errors are the browser blocking the response; the server already handled the request
• Non-simple requests (PUT, DELETE, application/json, custom headers) trigger a preflight OPTIONS request first
• CORS must be fixed on the server; the dev server proxy is a development-only workaround