Что такое CORS и как его настроить

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

Станьте веб-разработчиком с нуля за 15 месяцев на курсе онлайн-университета Skypro. Преподаватели — практикующие эксперты из VK, «Альфа-Банка», Skyeng и других крупных компаний. В программе нет лишней теории, зато много практических заданий, а результаты курсовых можно положить в портфолио. Специалисты центра карьеры помогут с резюме, сопроводительными письмами и собеседованиями.

Зачем нужен CORS?

В целях безопасности, браузеры запрещают запросы к другим доменам, используя технику «одного источника» (same-origin policy). Это означает, что веб-страница, загруженная с одного домена, не может получить данные с другого домена без явного разрешения сервера. CORS позволяет серверам указать, с каких доменов разрешено получать данные, обеспечивая безопасность и контроль доступа.

Как настроить CORS?

Настройка CORS включает в себя добавление специальных заголовков HTTP на сервере, которые разрешают кросс-доменные запросы. Вот пример таких заголовков:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization

• Access-Control-Allow-Origin: указывает, какие домены могут делать запросы к серверу. Значение * разрешает доступ для всех доменов, но для повышения безопасности лучше указать конкретные домены.
• Access-Control-Allow-Methods: перечисляет методы HTTP, которые разрешено использовать при запросах к серверу.
• Access-Control-Allow-Headers: указывает, какие HTTP-заголовки допустимы при запросах к серверу.

Настройка CORS может отличаться в зависимости от используемого сервера и языка программирования. Вот примеры настройки CORS для некоторых популярных серверов:

Node.js (Express)

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

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});

app.listen(3000, () => console.log('Server running on port 3000'));

Python (Flask)

from flask import Flask, request
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

if __name__ == '__main__':
    app.run()

На курсе Skypro «Веб-разработчик» научитесь писать код и тестировать его под руководством опытных наставников. Освоите все необходимые знания и навыки, чтобы стартовать в профессии уверенным младшим специалистом. Программу реально освоить, даже если вы никогда раньше не программировали и ничего не знаете об IT, а материалы курса и регулярные обновления будут доступны навсегда.

Курсы по программированию

Помогаем получить новую профессию с гарантией трудоустройства!

Подробнее

Заключение

CORS является важным механизмом безопасности, который позволяет контролировать доступ к ресурсам сервера с других доменов. Настройка CORS включает в себя добавление специальных HTTP-заголовков на сервере, которые определяют, какие домены, методы и заголовки разрешены для кросс-доменных запросов. В этой статье мы рассмотрели основы CORS и примеры его настройки для некоторых популярных серверов.

Тест на профориентацию

За 10 минут узнайте, как ваш опыт пригодиться в IT индустрии

Подробнее