CORS

 

What is CORS

CORS (Cross-Origin Resource Sharing) is a browser security mechanism that controls which origins (domains) are allowed to read responses from your server.

• Origin = protocol + domain + port
  • https://app.com ≠ https://api.com ≠ http://app.com

---

Why CORS was developed

Browsers enforce the Same-Origin Policy (SOP):

• A script from one origin cannot read data from another origin.

Problem SOP caused:

• Legit frontend (app.com) couldn’t call backend (api.com) and read responses.

CORS solution:

• Let the server explicitly whitelist trusted origins.

---

How CORS works

Simple request

Browser sends:

Origin: https://app.com

Server responds:

Access-Control-Allow-Origin: https://app.com

→ Browser allows frontend JS to read the response

---

Preflight request (for complex requests)

Browser first sends:

OPTIONS /api
Origin: https://app.com
Access-Control-Request-Method: POST

Server replies:

Access-Control-Allow-Origin: https://app.com
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Authorization

→ Then actual request is sent

---

What a “CORS error” means

When you see a CORS error:

• Request DID reach the server
• Server likely responded
• But browser blocked access to response

So:

CORS is enforced by the browser, not the server

---

How CORS improves security

CORS prevents:

• Malicious sites from reading sensitive responses

Example attack without CORS:

fetch("https://bank.com/account")
  .then(res => res.json())
  .then(data => sendToAttacker(data))

If cookies exist:

• Request succeeds
• Data returned
• Attacker reads it

With CORS:

• Request still goes
• Browser blocks response access
• Attacker gets nothing

---

Critical distinction (very important)

Topic	Prevents
CORS	Reading responses
CSRF	Sending malicious requests

Key insight:

• CORS does NOT stop the request
• It only stops JavaScript from reading the response

---

Relationship with cookies

If server allows:

Access-Control-Allow-Credentials: true

Then:

• Cookies can be sent cross-origin
• Must restrict allowed origins strictly

---

When you get CORS errors in Spring

Usually means:

• Backend didn’t allow your frontend origin
• Missing headers like:
  • Access-Control-Allow-Origin
  • Access-Control-Allow-Headers

---

Why CORS is important for reliability

• Prevents accidental data leakage
• Forces explicit frontend-backend contracts
• Avoids exposing APIs to unknown domains

---

Final mental model

• SOP = “block everything cross-origin”
• CORS = “allow only trusted origins”
• CSRF = “protect against unwanted actions”

They solve different problems:

• CORS → data exposure control
• CSRF → request authenticity control
  
  
  
  
  CONCLUSION 
• CORS (Cross-Origin Resource Sharing) is not what enables cross-origin requests themselves—browsers already allow sending requests to any domain—but it controls whether a browser allows JavaScript to read the response. By default, the browser enforces the Same-Origin Policy, meaning a script from app.com can send a request to api.com, but it cannot access the response data if the origins differ. CORS works by having the server explicitly include headers like Access-Control-Allow-Origin: https://app.com; when the browser sees this, it allows the frontend code on app.com to read the response from api.com. Without these headers, the request may still reach the server and even succeed, but the browser blocks the response and throws a CORS error. So CORS does not “allow communication” in general—it allows controlled sharing of response data between trusted origins, which is why it is required when frontend and backend are on different domains.