What is Cross-Origin? A beginner's guide to CORS

I browsed a few cross-origin explainers on Zhihu today and none read naturally for beginners, so I reworked one with the help of an AI.

Audience: absolute beginners.

---

🍪 What is cross-origin? (Beginner speed-run edition)

Since you're new, let's drop the developer jargon and use "neighborhood relationships" and "a building security guard" as an analogy.

---

1️⃣ What is cross-origin? (The guard's ID check)

Imagine you live in a residential complex in Beijing called "Xijiao No. 1".

• 🏠 Your home (the frontend): You live in Building A, Apt 101 inside this complex.
• 🍫 Your snack stash (the backend/server): Also in this complex, in Building B, Apt 202.

Normally, when you're hungry, you walk over to Building B to grab a snack. The security guard recognizes you as a resident — this is called "same origin", and you walk right through.

One day: You want something new. You hear that Building C, Apt 303 in the neighboring complex "Dongjiao Courtyard" has great cake. You head over and try to walk in. At the entrance, the security guard (the browser) stops you:

👮‍♂️ Guard: "Hold up! You're from Xijiao No. 1 — what gives you the right to walk in here? This is cross-origin. Not allowed!"

📝 Key takeaway

Cross-origin: The browser is like this guard. For safety, the rule is: unless the other side explicitly agrees, you can't just grab things from another "home" (different domain / protocol / port).

---

2️⃣ Why block it? (To keep thieves out)

The guard may feel overbearing — but without him, the internet would be chaos.

Picture this: you just logged into online banking (Xijiao No. 1), and then you opened a phishing site pretending to offer a prize (Dongjiao Courtyard). Without the guard, that phishing site could sneak into your banking page, steal your login (cookies), impersonate you, and wire your money out.