toolsmoah

Тестер CORS

Тестируйте и отлаживайте политики Cross-Origin Resource Sharing (CORS) и запросы API

Настройки запроса
Настройте свой запрос API для тестирования
Примеры запросов
Попробуйте эти предопределенные запросы API
Информация о CORS
Основная информация о CORS

Что такое CORS? CORS (Cross-Origin Resource Sharing) — это механизм, который позволяет веб-браузерам выполнять междоменные запросы (разные домены, протоколы или порты) из скриптов, работающих в браузере.

Ключевые заголовки CORS

  • Access-Control-Allow-Origin: Указывает, каким источникам разрешен доступ к ресурсу
  • Access-Control-Allow-Methods: Указывает, какие методы HTTP разрешены
  • Access-Control-Allow-Headers: Указывает, какие заголовки HTTP можно использовать
  • Access-Control-Allow-Credentials: Указывает, следует ли включать учетные данные (файлы cookie, HTTP-аутентификация)

💡 Решения CORS

Решения на стороне сервера

1. Express.js (Node.js):

const cors = require('cors');
          app.use(cors({
            origin: 'https://example.com',
            methods: ['GET', 'POST'],
            credentials: true
          }));

2. Spring Boot (Java):

@CrossOrigin(origins = "https://example.com")
          @RestController
          public class ApiController { ... }

Решения на стороне клиента

1. Использование прокси-сервера:

// package.json (React)
          "proxy": "http://localhost:3001"

2. JSONP (только GET):

// Ограниченное, но простое решение
          fetch('api?callback=handleResponse')

🔧 Конфигурация CORS по средам

Next.js

// next.config.js
          module.exports = {
            async headers() {
              return [
                {
                  source: '/api/:path*',
                  headers: [
                    {
                      key: 'Access-Control-Allow-Origin',
                      value: '*'
                    }
                  ]
                }
              ]
            }
          }

Nginx

location /api {
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 
              "GET, POST, OPTIONS";
            add_header Access-Control-Allow-Headers 
              "Content-Type, Authorization";
          }

Apache

# .htaccess
          Header always set Access-Control-Allow-Origin "*"
          Header always set Access-Control-Allow-Methods 
            "GET, POST, OPTIONS"
          Header always set Access-Control-Allow-Headers 
            "Content-Type, Authorization"

Конфигурация CORS по средам

Сценарии тестирования

  • • Простой запрос: Тестирование базового поведения CORS с помощью запросов GET
  • • Предварительный запрос: Тестирование предварительных запросов с методами PUT/DELETE
  • • Пользовательские заголовки: Тестирование запросов с заголовком Authorization
  • • Учетные данные: Тестирование запросов с файлами cookie
  • • Обработка ошибок: Тестирование сценариев сбоя

Соображения безопасности

  • • Будьте осторожны с использованием подстановочного знака (*) из-за рисков безопасности
  • • Принцип наименьших привилегий: разрешайте только необходимые источники и методы
  • • Ограничения учетных данных: разрешайте только определенные источники при включении учетных данных
  • • Регулярный пересмотр: периодически пересматривайте и обновляйте политики CORS

Советы по отладке CORS

Инструменты разработчика браузера

  • • Проверьте запросы OPTIONS на вкладке «Сеть»
  • • Ищите сообщения об ошибках CORS в консоли
  • • Проверьте заголовки CORS в заголовках ответа

Полезные инструменты

  • • Тестер CORS (этот инструмент)
  • • Postman (для тестирования API)
  • • Команда curl (для прямого тестирования сервера)