В чём разница между Same-Origin Policy и CORS?

При разработке веб-приложений часто возникает необходимость взаимодействия с ресурсами, находящимися на других серверах. В этом контексте важнейшую роль играют механизмы безопасности браузеров, известные как Same-Origin Policy и CORS. Понимание этих концепций критически важно для новичков, чтобы избежать распространённых ошибок и обеспечить безопасное взаимодействие с API.

Same-Origin Policy

Same-Origin Policy (SOP) — это механизм безопасности браузера, который ограничивает то, как документы или скрипты, загруженные с одного источника (origin), могут взаимодействовать с ресурсами другого источника. "Источник" определяется как комбинация схемы (protocol), хоста (host) и порта (port).

Пример:

• https://example.com:443 — это один источник.
• http://example.com:80 — это другой источник (разная схема).
• https://api.example.com:443 — это другой источник (разный хост).

Как работает Same-Origin Policy

SOP предотвращает:

Таким образом, если ваш JavaScript пытается выполнить запрос к https://api.example.com, когда основной документ загружен с https://example.com, браузер заблокирует этот запрос.

CORS (Cross-Origin Resource Sharing)

CORS — это механизм, который позволяет веб-приложениям на одном источнике (origin) запросить ресурсы с другого источника. CORS предоставляет серверу способ сообщать браузеру, что он разрешает запросы с других источников.

Как работает CORS

Access-Control-Allow-Origin: *

Пример использования CORS

Рассмотрим пример, где мы выполняем AJAX запрос к серверу. Если сервер поддерживает CORS, он должен установить необходимые заголовки.

fetch('https://api.example.com/data', {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json'
    }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Ошибка:', error));

На стороне сервера, если он на Node.js с использованием Express, код может выглядеть так:

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors()); // Включаем CORS

app.get('/data', (req, res) => {
    res.json({ message: 'Это кросс-доменный запрос!' });
});

app.listen(3000, () => {
    console.log('Сервер запущен на http://localhost:3000');
});

Заключение

Таким образом, Same-Origin Policy служит защитой против потенциально вредоносных запросов, а CORS предоставляет возможность безопасного обмена ресурсами между разными источниками. Понимание этих концепций поможет вам не только в открытии возможности работать с API, но и в обеспечении безопасной работы вашего приложения.