jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

GitHub-Pages-Tools

Kostenlose CORS Header Generator

Erstelle CORS-HTTP-Header für jede Origin-, Methoden- und Credential-Konfiguration.

Tool wird geladen...

Was ist CORS Header Generator?

CORS (Cross-Origin Resource Sharing) is a browser security mechanism that controls which web origins can access your resources. When a browser app tries to fetch data from a different domain, the browser checks CORS headers on the response. Without correct CORS headers, cross-origin requests fail with a CORS error in the console.

Kurze Antwort

CORS headers control which websites can access your server resources from browser JavaScript. Use Access-Control-Allow-Origin to specify allowed origins, Access-Control-Allow-Methods for HTTP verbs, and Access-Control-Allow-Credentials for cookie-based auth. Never combine * wildcard origin with credentials.

Einschränkungen

  • CORS only protects browser-based requests. Server-to-server requests, curl, and direct API calls are not subject to CORS — CORS is a browser enforcement mechanism, not a server security layer.
  • Some older browsers (IE 10 and below) have incomplete CORS support and may not handle preflight caching correctly. For modern web apps, browser support is universal.
  • CORS headers do not protect your API from DDoS, abuse, or unauthorized non-browser access. Use authentication, rate limiting, and a WAF alongside CORS.

So nutzt du dieses Tool

  1. Enter the allowed origins — use * for public APIs or specific domains for restricted access.
  2. Select the HTTP methods your endpoint supports and any custom headers clients may send.
  3. Toggle credentials support with care — browsers reject requests that combine * origins with credentials.
  4. Choose your deployment format and copy the generated header configuration.

Wofür du es nutzen kannst

  • Configure a public API that any frontend can call from any domain.
  • Set up a private API endpoint that only your own frontend domain can access, with cookie-based auth.
  • Generate CORS headers for a Cloudflare Worker or Express.js backend with correct preflight caching.

Anwendungsfalle

Praxisbeispiele

Beispiel

Public read-only API

A public JSON API serves data to any frontend. Set origin to *, allow GET only, and do not enable credentials. This is the simplest and safest CORS configuration for public data.

Beispiel

Private admin API with auth cookies

An admin dashboard at admin.example.com calls an API at api.example.com with session cookies. Set origin to admin.example.com, allow GET/POST/PUT/DELETE, enable credentials, and never use * for the origin.

Haufige Fehler

  • Using wildcard origin (*) together with Access-Control-Allow-Credentials: true — browsers reject this combination.
  • Forgetting to add Vary: Origin when serving different CORS headers based on the request origin.
  • Setting Access-Control-Max-Age above 86400 — browsers cap it at 24 hours regardless.

Überprüfung

  1. Open the browser DevTools Network tab, make a cross-origin request, and check the response headers for Access-Control-Allow-Origin and related headers.
  2. Test with curl -H 'Origin: https://example.com' -I https://your-api.com/endpoint to simulate a cross-origin request and verify the Access-Control headers.

FAQ

Fragen zu CORS Header Generator

Why do I get a CORS error even with the correct headers?

CORS errors can also be caused by network issues, self-signed certificates during development, or the browser blocking the request before it reaches your server. Check the browser console for the specific CORS error message and verify the preflight OPTIONS request returns a 2xx status. Some server frameworks return 404 or 500 for OPTIONS by default.

Can I use * for Access-Control-Allow-Origin with credentials?

No. The CORS specification explicitly forbids combining the wildcard origin with credentials. Browsers reject the response. If you need to support credentials, list each origin explicitly or dynamically echo back the request origin after validating it against an allowlist.

What is a CORS preflight request?

A preflight is an automatic OPTIONS request the browser sends before the actual request when the request is not simple. Requests are preflighted when they use methods other than GET/HEAD/POST, include custom headers like Authorization, or use Content-Type other than application/x-www-form-urlencoded, multipart/form-data, or text/plain. The preflight checks whether the server allows the intended request.

Verwandte Tools

Weitere github-pages-tools

Auch ausprobieren

Auch ausprobieren