什么是跨域?
今天看知乎上解释什么是跨域,没有写的通俗易懂的,于是自己结合AI写了一个。
本文适用对象:纯小白
🍪 什么是跨域?(小白极速入门版)
既然是小白,那我们完全抛弃程序员的专业术语,用**“邻里关系”和“保安”**来给你打个比方。
1️⃣ 什么是跨域?(保安大爷的盘查)
想象你住在北京的一个小区,名字叫**“西郊壹号”**。
- 🏠 你的家(前端):在这个小区里,你住在 A 栋 101 室。
- 🍫 你的零食库(后端/服务器):也在这个小区,是 B 栋 202 室。
平时你在家想吃零食,直接去 B 栋 202 拿就行,保安大爷认识你,知道你是自家人,这叫**“同源”**,随便进。
突然有一天: 你想吃点新鲜的,听说隔壁**“东郊大院”的 C 栋 303 室 有好吃的蛋糕。你跑过去想推门进去拿,这时候,门口的保安大爷(浏览器)**一把拦住了你:
👮♂️ 保安: “站住!你是西郊壹号的,凭什么来东郊大院拿东西?这叫跨域,不准进!”
📝 划重点
跨域:浏览器就像这个保安,为了安全,它规定:除非对方明确同意,否则你不能随便拿别家(不同域名/协议/端口)的东西。
2️⃣ 为什么要拦着你?(为了防贼)
你可能会觉得这保安多管闲事,但如果没有他,世界就乱套了。
想象一下:如果你刚登录了网上银行(西郊壹号),这时你又打开了一个中奖钓鱼网站(东郊大院)。 如果没这个保安,那个钓鱼网站就可以偷偷潜入你的银行页面,把你的登录信息(Cookie)偷走,然后冒充你把钱转光。
🛡️ 保安(浏览器)的存在,就是为了确保:只有你自己家的东西,你才能随便碰。
3️⃣ 那怎么才能拿到别家的东西?(三种解决办法)
有时候我们确实需要去别人家拿东西(比如你的网页需要去天气预报的服务器拿数据),这时候有几种办法:
🛠️ 方法 A:主人出门打招呼(CORS - 最常用的正规手段)
你(前端)去东郊大院(别的服务器)拿蛋糕。东郊大院的主人提前跟保安交待了:“只要是西郊壹号的人来拿,我都给,让他们进!” 保安大爷查了一下名单,发现你确实在白名单上,就放你进去了。
- 💡 专业术语:服务器在响应头里加个
Access-Control-Allow-Origin。
🛵 方法 B:找个中间人代买(Proxy/代理 - 程序员最爱用)
你怕保安拦,你就不亲自去了。你找了一个。小哥先到你家,然后转头去东郊大院帮你把蛋糕买回来送到你家。 :保安大爷只拦“普通邻居”,不拦“职业跑腿的服务器”。服务器和服务器之间说话,是没有保安管的。
Comments (0)
Sign in to leave a comment
Sign In