toolsmoah

CORS Tester

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

Verzoekinstellingen
Configureer uw API-verzoek voor testen
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

CORS Debugging Tips

Browser Ontwikkelaarstools

  • โ€ข Controleer OPTIONS-verzoeken in het tabblad Netwerk
  • โ€ข Zoek naar CORS-foutmeldingen in de Console
  • โ€ข Verifieer CORS-headers in Antwoordheaders

Handige tools

  • โ€ข CORS Tester (deze tool)
  • โ€ข Postman (voor API-testen)
  • โ€ข curl-commando (voor directe servertesten)
    CORS Tester