登录
No.16核心3 条来源

跨域CORS

课堂投屏

一句话

跨域是网页去请求另一个“源”的资源;浏览器默认不让网页读到结果,除非对方服务器用响应头明确放行。

大白话

浏览器像小区门卫:住户托人从别的小区取东西,门卫先看对方有没有开“允许你们小区来取”的条子,没有就把东西拦在门口。

比喻的边界

门卫只站在浏览器里。同样的请求用命令行或服务器发,根本没人拦;所以跨域报错不代表对方服务器坏了,而是浏览器在保护用户。

拿去就能用

开始做

我的前端部署在,要调用我自己写的后端接口。帮我在后端配置跨域,只放行这个前端地址,说明要允许哪些请求方式和请求头。改完告诉我在浏览器里看哪个响应头来确认。

还差:前端地址,发给 AI 前记得换掉

出错了

GET 请求正常,发 JSON 的 POST 请求却报跨域错误,网络面板里先出现了一条 OPTIONS 请求。我怀疑是预检请求没通过,先帮我看那条 OPTIONS 的响应头缺了什么,确认后再改服务器配置。

想做深

我要调用一个第三方接口,它没给我的网站放行跨域,我也改不了它的服务器。帮我比较通过自己的后端转发和其他做法,说明密钥放哪里才安全,不要用关掉浏览器安全限制的办法。

别这样说 → 这样说

别这样说

跨域了,你帮我把跨域关掉。

这样说

我的前端在 http://localhost:5173,请求 http://localhost:8000/api/notes,控制台报 “blocked by CORS policy”。后端是我自己写的。帮我在后端只放行这个前端地址,不要设置成允许所有来源,改完告诉我怎么验证。

差别:说清了两边的地址、报错原文、谁能改服务器,并排除了“全部放开”的偷懒做法。

容易误解:

误解跨域报错说明后端出错了,装个浏览器插件或关掉安全检查就好。

其实是请求常常已经到达服务器并正常返回,是浏览器按同源策略拦下了结果;正确做法是让服务器在响应头里放行你的来源,或改由自己的后端转发。

展开专业理解

“源”由协议、域名和端口决定,任一不同就算跨源,localhost:5173 和 localhost:8000 也是两个源。同源策略限制脚本读取跨源响应;CORS 让服务器用响应头声明放行哪些源。发 JSON 或自定义请求头会先发 OPTIONS 预检;带 Cookie 的请求还要求服务器写明具体来源、不能用 *。失败细节只在控制台里看得到。

来源

  1. MDN:Cross-Origin Resource Sharing (CORS) 核对于 2026-09-26
  2. MDN:Same-origin policy 核对于 2026-09-26
  3. MDN:CORS errors 核对于 2026-09-26