同源策略不干预、、等标签的跨域加载，浏览器直接放行；真正触发拦截的是js读取响应（如response.json()）或访问跨域iframe内容时，此时才校验cors头。
不会拖慢，因为同源策略压根不参与 HTML 标签的跨域加载过程——它根本没在那儿“运行”。
浏览器对 <img>、<script></script>、<link> 的跨域请求不做同源校验
这些标签发起的请求，浏览器直接放行，不检查 Origin，不发 OPTIONS 预检，也不看 Access-Control-Allow-Origin。能加载成功，不代表 JS 能读内容；加载失败，通常是因为网络、路径或服务端 404/500，和同源策略无关。
常见错误现象：
-
<img src="https://cdn.example.com/photo.jpg?x-oss-process=image/resize,p_40">显示空白 → 检查图片 URL 是否真实存在、CDN 是否限 Referer 或鉴权 -
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>报 403 → 是 unpkg 的访问策略拦截，不是浏览器同源策略
fetch() 和 XMLHttpRequest 受限，但原因不在 HTML
真正触发同源策略拦截的，是 JS 主动读取响应体那一刻。HTML 写个 <iframe src="https://other.com/page.html"></iframe> 能正常渲染，但 JS 执行 iframe.contentDocument 就报错：Blocked a frame with origin "https://my.com" from accessing a cross-origin frame。
关键区别：
- 资源“加载”（render）：浏览器允许跨域，无限制
- 资源“读取”（read）：JS 调用
response.text()、response.json()、iframe.contentWindow等时，同源策略才生效 - 带
credentials: 'include'的fetch请求，必须配套服务端返回Access-Control-Allow-Credentials: true，且Access-Control-Allow-Origin不能为*
CORS 配置漏项才是卡顿/失败的真凶
很多“跨域失败”实际是预检（OPTIONS）被服务端静默拒绝，导致浏览器重试或直接中断，看起来像“变慢”。典型漏配：
- 前端发了
Authorizationheader，但服务端没在Access-Control-Allow-Headers里声明它 - 用了
Content-Type: application/json，但服务端没允许该类型（非简单请求必走预检） - Node.js/Koa 中只写了
ctx.set('Access-Control-Allow-Origin', '*')，却忘了加ctx.set('Access-Control-Allow-Methods', 'GET,POST')
验证方式：打开 DevTools → Network → 找到那个失败请求 → 看它前面有没有一个 OPTIONS 请求，状态码是不是 404/405/500。
最容易被忽略的一点：同源策略不是性能瓶颈，而是访问控制开关。它不“拖慢”，它“拦住”——拦的位置、时机、是否可绕过，全由你调用的是哪个 API、服务端返回了什么头决定。写对 HTML 标签没用，关键在后续 JS 怎么读、服务端怎么回。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
