Что такое CORS · Frontend Developer — JobPilot

Что такое CORS

Frontend Developer · 25%
Вопрос 1882 / #
Пример ответа

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

Ключевые идеи:
  • CORS предотвращает межсайтовые атаки, разрешая только определённые запросы с других источников через HTTP-заголовки.
  • Сервер должен отправлять заголовки, такие как Access-Control-Allow-Origin, чтобы браузер разрешил доступ к ресурсам.
  • В моём опыте, настройка CORS на бэкенде (например, в Laravel) и обработка предварительных запросов (preflight) критичны для работы API с фронтендом.
Пример: При разработке SPA на React, я настраивал Laravel-бэкенд, чтобы он отправлял Access-Control-Allow-Origin: https://myapp.com, разрешая запросы только с этого домена, и обрабатывал OPTIONS-запросы для preflight.
Пример настройки CORS в Laravel с использованием пакета fruitcake/laravel-cors
php
// В config/cors.php
return [
    'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['https://myapp.com'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => false,
];

// В app/Http/Kernel.php — добавление middleware
protected $middleware = [
    // ...
    \Fruitcake\Cors\HandleCors::class,
];
Вопросы для интервьюера:
  • Как вы обрабатываете CORS в разработке с локальным сервером?Я настраиваю allowed_origins на ['http://localhost:3000'] и использую middleware для dev-среды, чтобы разрешить все источники, но только в тестовых целях.
  • Какие ошибки CORS вы чаще всего встречали и как их решали?Ошибки из-за отсутствия заголовков Access-Control-Allow-Origin или неправильной обработки preflight; я проверял конфигурацию сервера и добавлял поддержку OPTIONS-запросов.
Практический совет (на неделю):
  1. Всегда настраивайте CORS на бэкенде, а не полагайтесь на отключение в браузере, чтобы обеспечить безопасность в production.
  2. Используйте инструменты, такие как Laravel CORS пакет, для упрощения конфигурации и тестирования с разными источниками.
Frontend Developer
Общий
25%
Навигация
Что такое Virtual DOM
Следующий: Почему меняешь работу
Предыдущий: Что такое Virtual DOM

Мы используем cookie для улучшения сайта. Продолжая пользоваться сайтом, вы соглашаетесь с политикой cookie и политикой конфиденциальности.