Cross-Domain

Cross-domain = different origins, CORS controls access

---

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."

---

JSONP (Legacy)

"Workaround before CORS"

function handleResponse(data) {
  console.log(data);
}

const script = document.createElement("script");
script.src = "https://api.example.com/data?callback=handleResponse";
document.body.appendChild(script);

Legacy workaround, CORS is preferred.

"JSONP was a legacy workaround for cross-origin requests using script tags, but CORS is the modern solution."

---

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."

---

9️⃣ 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)