浏览器有同源策略，但是为什么我们可以将静态资源放到 CDN 上，使用不同的域名访问，这不会有跨域限制吗？

参考答案：

浏览器的 同源策略 主要是为了防止恶意网站进行 跨站请求伪造（CSRF） 或 跨站脚本攻击（XSS）。

它的核心是限制不同源之间的相互访问，但 静态资源（如图片、CSS、JS 文件） 可以通过 跨域资源共享（CORS） 等机制来实现跨域访问。

为什么静态资源可以放到 CDN 上，并且不会遇到跨域限制？

1. 静态资源与同源策略：

   • 同源策略限制的是 脚本（如 JavaScript）之间的跨域请求，而 静态资源（如图片、字体、CSS、JavaScript 文件）并不会触发同源策略。浏览器允许从不同域名加载静态资源。

2. CORS（跨域资源共享）：

   • 对于 API 请求（如 fetch 或 XMLHttpRequest），浏览器会进行跨域检查。然而，对于静态资源，如果服务器配置了 Access-Control-Allow-Origin 响应头，浏览器会允许不同域名的请求。
   • 静态资源的跨域通常不涉及数据读取和修改，所以浏览器对于 GET 请求 的跨域资源会宽松处理。

3. CDN 使用的典型模式：

   • CDN（内容分发网络）是专门为了提供加速而存在的，通常会允许多个来源的资源访问。CDN 服务器通过设置适当的 CORS 头，确保资源能够被不同的域访问。
   • 例如，CDN 服务商会允许所有源通过 Access-Control-Allow-Origin: * 来访问资源。

4. 浏览器的缓存与性能优化：

   • 静态资源如图片、CSS、JavaScript 等，通常通过缓存机制减少服务器负载。将这些资源放到 CDN 上，能够减少延迟并提高加载速度。浏览器通常会允许跨域访问这些资源以优化性能。

示例：CORS 头的使用

如果你希望某个域名的静态资源能够被其他域名访问，CDN 服务器需要在响应头中设置 CORS 相关的头信息，如：

Access-Control-Allow-Origin: *

这个头告诉浏览器，允许任何域名访问该资源。

题目要点：

• 同源策略 主要是针对 JavaScript 中的跨域请求限制，而 静态资源（如图片、CSS、JS 文件）不受此限制。
• 通过 CORS 头，CDN 可以允许跨域请求加载资源。
• 静态资源 访问的跨域限制比 API 请求 要宽松，因此在不同的域名上访问 CDN 中的资源是可行的。