跨域：浏览器有同源策略，但是为何 cdn 请求资源的时候不会有跨域限制？

提示：跨域：浏览器有同源策略，但是为何 cdn 请求资源的时候不会有跨域限制？

---

---

浏览器的 同源策略（Same-Origin Policy） 确实会限制跨域请求，但 CDN 资源请求通常不受限制，原因如下：

原因总结

1. CDN 资源的加载方式规避了同源策略

• <script>、<link>、<img> 等标签默认允许跨域
  浏览器允许以下标签直接加载跨域资源（无需 CORS）：

<!-- 这些标签不受同源策略限制 -->
<script src="https://cdn.example.com/jquery.js"></script>
<link href="https://cdn.example.com/style.css" rel="stylesheet">
<img src="https://cdn.example.com/image.png">

• 原因：这些资源被视为静态文件，不会通过 JavaScript 直接访问内容，因此浏览器默认放行。

例外：如果通过 JavaScript 动态请求这些资源（例如 fetch 或 XMLHttpRequest），则会触发同源策略。

2. CDN 通常会正确设置 CORS 响应头

• 即使是通过 JavaScript 动态加载的资源（如字体、API 请求），CDN 也会通过 CORS（跨域资源共享） 机制允许跨域访问：
• CDN 服务器返回的响应头示例：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, OPTIONS

这样浏览器会允许跨域请求。

3. 为什么同源策略不阻止 CDN 资源？

• 历史原因：早期的网页需要引用公共库（如 jQuery），如果禁止跨域，每个网站都要自己托管这些文件，效率极低。

• 安全权衡：

   		静态资源（JS/CSS/图片）通常不会直接窃取用户数据。真正的风险来自 通过 JavaScript 读取跨域数据（如 AJAX 请求），所以同源策略主要限制这类行为。
  

总结

场景	是否受同源策略限制	原因
通过<script>加载CDNJS	❌ 否	浏览器默认允许跨域静态资源加载
通过 fetch 请求 CDN 数据	✅ 是（除非配置 CORS）	需要服务器明确允许跨域（Access-Control-Allow-Origin）
CDN 的 CSS/图片	❌ 否	静态资源标签天生豁免同源策略

• 核心逻辑：同源策略主要限制 通过 JavaScript 访问跨域数据，而 CDN 的静态资源加载通过标签或正确 CORS 配置规避了这一限制。