CORS Example

Make allowed request Make blocked request

The two buttons above each call a JS function that makes a request to an endpoint on this site:

• The "allowed" button returns a message along with CORS headers that grant access to everyone. This works, but is insecure.
• The "blocked" button returns a message accompanied by CORS headers that deny access from everywhere. This will still work when it's your own site because same-origin is always allowed, but if you request it from another hostname (ask your neighbour!), it will fail.

Use your dev tools to inspect the responses and look at the headers they contain. In these examples, no preflight OPTIONS request is needed because they are "simple" GET requests. Whether a request will trigger an OPTIONS request is determined by these rules:

Scenario	OPTIONS Needed?	Why?
GET request with standard headers	❌ No	"Simple" request, no preflight needed.
POST with Content-Type: application/json	✅ Yes	Non-standard Content-Type triggers a preflight.
PUT/DELETE request	✅ Yes	Non-simple method triggers a preflight.
Request with an Authorization header	✅ Yes	Custom header triggers a preflight.
Request with credentials (cookies)	✅ Yes	Credentials require explicit preflight approval.