toolsmoah

Tester CORS

Testuj i debuguj zasady CORS (Cross-Origin Resource Sharing) i żądania API

Ustawienia żądania
Skonfiguruj żądanie API do testowania
Przykładowe żądania
Wypróbuj te predefiniowane żądania API
Informacje o CORS
Podstawowe informacje o CORS

Co to jest CORS? CORS (Cross-Origin Resource Sharing) to mechanizm, który umożliwia przeglądarkom internetowym wykonywanie żądań między domenami (różne domeny, protokoły lub porty) ze skryptów działających w przeglądarce.

Kluczowe nagłówki CORS

  • Access-Control-Allow-Origin: Określa, które źródła mają dostęp do zasobu
  • Access-Control-Allow-Methods: Określa, które metody HTTP są dozwolone
  • Access-Control-Allow-Headers: Określa, które nagłówki HTTP mogą być używane
  • Access-Control-Allow-Credentials: Określa, czy należy uwzględnić poświadczenia (pliki cookie, uwierzytelnianie HTTP)

💡 Rozwiązania CORS

Rozwiązania po stronie serwera

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 { ... }

Rozwiązania po stronie klienta

1. Korzystanie z serwera proxy:

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

2. JSONP (tylko GET):

// Ograniczone, ale proste rozwiązanie
          fetch('api?callback=handleResponse')

🔧 Konfiguracja CORS według środowiska

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"

Konfiguracja CORS według środowiska

Scenariusze testowe

  • • Proste żądanie: Testuj podstawowe zachowanie CORS za pomocą żądań GET
  • • Żądanie preflight: Testuj żądania preflight za pomocą metod PUT/DELETE
  • • Niestandardowe nagłówki: Testuj żądania z nagłówkiem Authorization
  • • Poświadczenia: Testuj żądania z plikami cookie
  • • Obsługa błędów: Testuj scenariusze awarii

Kwestie bezpieczeństwa

  • • Zachowaj ostrożność przy używaniu symbolu wieloznacznego (*) ze względu na ryzyko bezpieczeństwa
  • • Zasada najmniejszych uprawnień: Zezwalaj tylko na niezbędne źródła i metody
  • • Ograniczenia poświadczeń: Zezwalaj tylko na określone źródła podczas dołączania poświadczeń
  • • Regularny przegląd: Okresowo przeglądaj i aktualizuj zasady CORS

Wskazówki dotyczące debugowania CORS

Narzędzia deweloperskie przeglądarki

  • • Sprawdź żądania OPTIONS w zakładce Sieć
  • • Poszukaj komunikatów o błędach CORS w Konsoli
  • • Zweryfikuj nagłówki CORS w nagłówkach odpowiedzi

Przydatne narzędzia

  • • Tester CORS (to narzędzie)
  • • Postman (do testowania API)
  • • polecenie curl (do bezpośredniego testowania serwera)
    Tester CORS