Tester CORS

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

Ustawienia żądania

Skonfiguruj żądanie API do testowania

URL

Metoda HTTP

Nagłówki

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