Skip to main content

Cross-Domain

What is Cross-Domain?​

"Requests between different origins"

Cross-domain (cross-origin) refers to requests between different origins (protocol, domain, or port).

"Cross-domain requests are HTTP requests between different origins, restricted by the same-origin policy and controlled by CORS."

Same-Origin Policy​

Same protocol + domain + port

Same-origin means:

  • Same protocol (http/https)
  • Same domain
  • Same port

Different = cross-origin.

"Same-origin policy restricts access to resources from different origins - cross-origin requests are blocked by default."

CORS (Cross-Origin Resource Sharing)​

"Server allows cross-origin requests"

CORS is a mechanism that allows servers to specify which origins can access resources.

"CORS allows servers to specify which origins can make cross-origin requests through HTTP headers."

CORS Headers​

Access-Control-Allow-Origin

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Credentials: true

"CORS uses headers like Access-Control-Allow-Origin to specify allowed origins, methods, and headers."

Preflight Requests​

OPTIONS request before actual request

For complex requests:

  1. Browser sends OPTIONS (preflight)
  2. Server responds with CORS headers
  3. Browser sends actual request if allowed

"Preflight requests (OPTIONS) are sent before complex cross-origin requests to check permissions."

Simple vs Preflight Requests​

Simple = GET/POST, Preflight = others

Simple requests (no preflight):

  • GET, POST, HEAD
  • Simple headers
  • Content-Type: text/plain, application/x-www-form-urlencoded

Preflight required:

  • PUT, DELETE, PATCH
  • Custom headers
  • Content-Type: application/json

"Simple requests (GET/POST with simple headers) don't require preflight, while complex requests do."

Common Scenarios​

API calls · Assets · Web fonts

  • API calls: Frontend calling backend API
  • CDN assets: Loading resources from CDN
  • Web fonts: Loading fonts from different domain
  • Embedded content: iframes, images

"Cross-domain scenarios include API calls, CDN assets, web fonts, and embedded content from different origins."

Security Considerations​

CORS prevents unauthorized access

  • Prevents malicious sites from accessing APIs
  • Server controls which origins can access
  • Credentials require explicit allow
  • Wildcard (*) has limitations

"CORS provides security by allowing servers to control which origins can access resources, preventing unauthorized access."

Best Practices​

✅ Configure CORS properly on server ✅ Use specific origins, not wildcard ✅ Handle preflight requests ✅ Use credentials carefully ✅ Test cross-origin scenarios ❌ Don't disable CORS security ❌ Don't use JSONP (use CORS)

"Cross-domain requests are between different origins, restricted by same-origin policy. CORS allows servers to specify which origins can access resources via HTTP headers. Simple requests (GET/POST) don't need preflight, complex requests do. CORS provides security by controlling access. JSONP was a legacy workaround, CORS is the modern solution."

🧠 Ultra-Short Cheat Sheet​

Different origins
Same-origin policy
CORS (server allows)
Preflight requests (OPTIONS)
Simple vs complex requests
Security mechanism
JSONP (legacy)