Suggest an edit

Improve this article

Refine the answer for “What is CORS?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 1. What CORS is

**CORS (Cross-Origin Resource Sharing)** is a **browser security mechanism**
that **controls which sites are allowed to reach your server** via JavaScript.

> Put simply: **CORS decides who's allowed to make AJAX requests to your API.**

## 2. What an "origin" is

An "origin" is a **unique combination** of three parts:

```javascript
<scheme>://<domain>:<port>
```

For example:

| URL | Origin |
|---|---|
| https://myshop.com | https://myshop.com |
| https://api.myshop.com | a different origin (a different subdomain) |
| http://myshop.com | a different origin (a different scheme, HTTP instead of HTTPS) |
| https://myshop.com:4000 | a different origin (a different port) |

If a page was loaded from one origin,
it **cannot** by default reach resources on a different origin via JS.

## 3. Why this is needed

CORS is a defense against **CSRF** and other attacks.
Without it, `evil.com` could, for instance, quietly send AJAX requests to `bank.com` on behalf of a user
who already has an active session at the bank.

## 4. How it works (briefly)

When the browser makes a request **to a different domain**, it:

1. Checks: "Is this origin allowed to make this request?"
2. If the required CORS headers are missing, it blocks the response and raises an error in the console.

## 5. The main CORS headers

| Header | Who sends it | What it does |
|---|---|---|
| `Origin` | the browser | tells the server which site the request is coming from |
| `Access-Control-Allow-Origin` | the server | states which sites are allowed access |
| `Access-Control-Allow-Methods` | the server | lists which HTTP methods are allowed (GET, POST, PUT...) |
| `Access-Control-Allow-Headers` | the server | lists which headers can be sent |
| `Access-Control-Allow-Credentials` | the server | allows or forbids sending cookies |

## 6. A request and response example

**Request:**

```javascript
GET /data HTTP/1.1
Host: api.example.com
Origin: https://frontend.com
```

**Response:**

```javascript
HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://frontend.com
Content-Type: application/json
```

Now the browser sees that `https://frontend.com` is allowed, and lets the response through to the JavaScript code.

If that header is missing, the console shows an error:

> "Access to fetch at 'https://api.example.com/data' from origin 'https://frontend.com' has been blocked by CORS policy."

## 7. The preflight request

If a request is "non-simple" (e.g. a `POST` with a JSON body or custom headers),
the browser **first** sends a "preflight", a special `OPTIONS` request:

```javascript
OPTIONS /api/data
Origin: https://frontend.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type
```

The server must respond:

```javascript
HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://frontend.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type
```

Only after that does the browser send the real `POST`.

## 8. A configuration example in Node.js (without frameworks)

```javascript
import http from 'node:http';

const server = http.createServer((req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*'); // or a specific domain
  res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE,OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type,Authorization');

if (req.method === 'OPTIONS') {
    res.writeHead(204);
    res.end();
    return;
  }

res.end('OK');
});

server.listen(3000);
```

## 9. Typical configuration scenarios

| Scenario | How to configure it |
|---|---|
| A public API | `Access-Control-Allow-Origin: *` |
| A private API (frontend.com only) | `Access-Control-Allow-Origin: https://frontend.com` |
| With authorization (cookies, JWT) | you need `Access-Control-Allow-Credentials: true` and **cannot** use `*` |

## 10. In short

> **CORS** is a mechanism that lets a server declare
> which external sites (origins) are allowed to make requests to its API from a browser.
>
> It's there for **security**, but it's configured on the **server side**,
> because only the server can decide who to trust.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts583 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.