Як працює CORS і як правильно налаштувати його для веб-додатків

CORS, Веб-розробка · 17-3-2025

Cross-Origin Resource Sharing (CORS) — це механізм, який дозволяє веб-додаткам контролювати, які ресурси можуть бути доступні з інших доменів. Це важлива частина безпеки, особливо коли мова йде про захист даних користувачів. Коли ви розумієте, як CORS працює, ви можете ефективно налаштувати його для вашого додатку і забезпечити безпеку інформації.

Основи CORS

Коли браузер відправляє запит на інший домен (не той, з якого ресурс був завантажений), він автоматично бачить це як крос-доменний запит. Для того щоб запит був успішно виконаний, розміщений на сервері ресурс повинен мати налаштовані CORS заголовки, які дозволяють цей запит.

Заголовки CORS

У відповідь сервер може надіслати такі заголовки:

Access-Control-Allow-Origin: Вказує, які домени можуть отримувати доступ до ресурсу.
Access-Control-Allow-Methods: Список HTTP-методів, які дозволені для крос-доменного запиту.
Access-Control-Allow-Headers: Заголовки, які клієнт може використовувати з запитом.

Налаштування CORS

Для того щоб налаштувати CORS, важливо розуміти, які саме ресурси Ви збираєтесь відкривати для доступу та кому дозволено ці ресурси отримувати.

Приклад налаштування сервера Node.js

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

const corsOptions = {
  origin: 'https://example.com',
  methods: 'GET,POST',
  allowedHeaders: 'Content-Type'
};

app.use(cors(corsOptions));

app.get('/', (req, res) => {
  res.json({ message: 'CORS налаштовано!' });
});

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

У цьому прикладі ми використовуємо middleware cors для Express, що дозволяє запити з домену https://example.com. Це приклад показує, як дозволити лише GET і POST запити з конкретного домену.

Приклад налаштування сервера Ruby on Rails

class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
  before_action :cors_preflight_check

  def cors_preflight_check
    if request.method == 'OPTIONS'
      headers['Access-Control-Allow-Origin'] = '*'
      headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
      headers['Access-Control-Allow-Headers'] = 'X-Requested-With, X-Prototype-Version'
      render text: '', content_type: 'text/plain'
    end
  end
end

У цьому прикладі ми додаємо метод cors_preflight_check для обробки запитів OPTIONS, які відправляються перед основним запитом. Це дозволяє налаштувати CORS для всього додатку. Зірочка (*) вказує, що дозволено запити з будь-якого домену.

Часті проблеми з CORS

Блокування запитів: Це може статися, якщо сервер не правильно налаштовує заголовки CORS.
Preflight requests: Перед основним запитом може бути надіслано попередній запит (preflight) для перевірки дозволів, якщо це не враховано, запит буде заблоковано.
Кешування: CORS відповіді можуть бути закешовані, що впливає на термін дії дозволів.

Ключові моменти

CORS допомагає забезпечити безпеку Ваших додатків, обмежуючи доступ до ресурсів з сторонніх сайтів. Налаштування CORS заголовків є важливим кроком, що може захистити Ваш веб-додаток від небажаних запитів і зберегти особисті дані користувачів безпечними.

Знання і правильне налаштування CORS — важливий аспект в розробці веб-додатків, який варто враховувати кожному розробнику/розробниці