CORS Tester

Test en debug Cross-Origin Resource Sharing (CORS) beleid en API-verzoeken

Verzoekinstellingen

Configureer uw API-verzoek voor testen

URL

HTTP-methode

Headers

Voorbeeldverzoeken

Probeer deze vooraf gedefinieerde API-verzoeken

CORS Informatie

Basis informatie over CORS

Wat is CORS? CORS (Cross-Origin Resource Sharing) is een mechanisme dat webbrowsers in staat stelt om cross-origin verzoeken (ander domein, protocol of poort) te doen vanuit scripts die in de browser draaien.

Belangrijke CORS-headers

Access-Control-Allow-Origin: Specificeert welke origins toegang hebben tot de bron
Access-Control-Allow-Methods: Specificeert welke HTTP-methoden zijn toegestaan
Access-Control-Allow-Headers: Specificeert welke HTTP-headers kunnen worden gebruikt
Access-Control-Allow-Credentials: Specificeert of referenties (cookies, HTTP-authenticatie) moeten worden opgenomen

💡 CORS Oplossingen

Server-side oplossingen

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

Client-side oplossingen

1. Gebruik van een proxyserver:

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

2. JSONP (alleen GET):

// Beperkte maar eenvoudige oplossing
          fetch('api?callback=handleResponse')

🔧 CORS-configuratie per omgeving

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-configuratie per omgeving

Testscenario's

• Eenvoudig verzoek: Test basis CORS-gedrag met GET-verzoeken
• Preflight-verzoek: Test preflight-verzoeken met PUT/DELETE-methoden
• Aangepaste headers: Test verzoeken met Authorization-header
• Referenties: Test verzoeken met cookies
• Foutafhandeling: Test foutscenario's

Beveiligingsoverwegingen

• Wees voorzichtig met het gebruik van wildcards (*) vanwege beveiligingsrisico's
• Principe van minimale privileges: Sta alleen noodzakelijke origins en methoden toe
• Referentiebeperkingen: Sta alleen specifieke origins toe bij het opnemen van referenties
• Regelmatige controle: Controleer en update CORS-beleid periodiek