文章目录1. 什么情况下才会发生“跨域问题”2. 常见的 CDN 资源为什么不会触发a) 脚本资源script src...b) 图片、CSS、音视频资源img, link, video3. 如何“主动避免”跨域问题—— CORS 机制总结这是一个非常经典且重要的前端问题。很多人都有一个误解“CDN 资源不会产生跨域问题”。实际上更准确的表述是我们通过一些技术手段让 CDN 资源避免了跨域问题。核心原因在于CDN 资源的域名通常与主站域名不同但它们被设计成不会触发浏览器的跨域限制。下面我们从几个层面来深入解析1. 什么情况下才会发生“跨域问题”首先要明确跨域问题不是所有请求都会触发。它是浏览器出于安全考虑同源策略施加的一种限制只针对某些类型的请求主要是AJAX / Fetch 请求当你使用XMLHttpRequest或Fetch API去请求不同源的资源时。Web 字体在 CSS 中通过font-face使用不同源的字体文件。Canvas 绘制图片在canvas上使用drawImage绘制不同源的图片并尝试调用toDataURL()或getImageData()方法。JavaScript 模块等。2. 常见的 CDN 资源为什么不会触发a) 脚本资源script src...机制HTML 的script标签天生就允许跨域。这是历史原因决定的也是为了允许像使用公共 CDN 上的 jQuery、Vue 等库。背后的逻辑浏览器在解析script时会去下载并执行其中的代码。这些代码在成功加载后就在当前页面的执行环境中运行。如果这也有跨域限制那整个互联网的第三方库生态将无法存在。注意虽然可以跨域加载但你可以通过crossorigin属性来有选择地暴露错误信息。这引出了另一个相关概念。b) 图片、CSS、音视频资源img,link,video机制这些资源的加载是“嵌入”而非“请求数据”。它们被浏览器直接渲染或应用而不需要通过 JavaScript API 去读取其内容。因此同源策略不会阻止它们的加载。举例你可以随意在页面上插入一个来自其他域名的图片img srchttps://cdn.example.com/cat.jpg浏览器会正常加载和显示。3. 如何“主动避免”跨域问题—— CORS 机制对于那些本来会受到同源策略限制的请求如 Web 字体、通过 Fetch 请求 CDN 上的 APICDN 服务商通过配置CORS来主动解决这个问题。CORS 的工作原理当你的网站https://www.my-site.com试图通过Fetch API请求 CDN 上的一个资源https://cdn.example.com/data.json时浏览器会执行以下步骤发送请求浏览器会正常发送请求。浏览器检查因为这是跨域请求浏览器会检查响应头中是否包含一个特定的字段Access-Control-Allow-Origin。CDN 响应配置了 CORS 的 CDN 服务器会在响应头中包含Access-Control-Allow-Origin: https://www.my-site.com或者如果 CDN 想允许任何网站访问它会返回Access-Control-Allow-Origin: *浏览器放行浏览器看到响应头中的Access-Control-Allow-Origin值包含了你的源站域名https://www.my-site.com或通配符*就会认为这次跨域请求是安全的从而将响应数据交给你的前端代码。CDN 服务商做了什么他们在 CDN 服务器的配置中为需要跨域访问的资源如字体、API 接口等设置了正确的Access-Control-Allow-Origin响应头。这就是为什么你可以直接从 CDN 使用 Web 字体而不会遇到跨域问题。总结资源类型使用的 HTML 标签/API为何没有跨域问题关键原因JavaScript 库script src...历史设计使然默认允许跨域浏览器特意放行图片、CSSimg,link属于“嵌入”资源非同源策略限制对象浏览器特意放行Web 字体font-facein CSSCDN 服务器配置了CORS响应头主动授权API 数据Fetch/AJAXCDN 服务器配置了CORS响应头主动授权所以结论是对于默认就允许跨域的标签如script、imgCDN 资源天然无跨域问题。对于默认不允许跨域的请求如字体、FetchCDN 服务商通过正确配置 CORS 响应头主动告诉浏览器“我允许你跨域访问我”从而避免了跨域问题。这使得 CDN 在作为资源托管和分发的角色时能够无缝地与任何站点的前端代码协同工作。 感谢阅读想了解更多 我的博客网站 | 记录思考分享干货 我的个人主页 | 关于我、开源项目 为什么 CDN 资源不会产生跨域问题?
文章目录1. 什么情况下才会发生“跨域问题”2. 常见的 CDN 资源为什么不会触发a) 脚本资源script src...b) 图片、CSS、音视频资源img, link, video3. 如何“主动避免”跨域问题—— CORS 机制总结这是一个非常经典且重要的前端问题。很多人都有一个误解“CDN 资源不会产生跨域问题”。实际上更准确的表述是我们通过一些技术手段让 CDN 资源避免了跨域问题。核心原因在于CDN 资源的域名通常与主站域名不同但它们被设计成不会触发浏览器的跨域限制。下面我们从几个层面来深入解析1. 什么情况下才会发生“跨域问题”首先要明确跨域问题不是所有请求都会触发。它是浏览器出于安全考虑同源策略施加的一种限制只针对某些类型的请求主要是AJAX / Fetch 请求当你使用XMLHttpRequest或Fetch API去请求不同源的资源时。Web 字体在 CSS 中通过font-face使用不同源的字体文件。Canvas 绘制图片在canvas上使用drawImage绘制不同源的图片并尝试调用toDataURL()或getImageData()方法。JavaScript 模块等。2. 常见的 CDN 资源为什么不会触发a) 脚本资源script src...机制HTML 的script标签天生就允许跨域。这是历史原因决定的也是为了允许像使用公共 CDN 上的 jQuery、Vue 等库。背后的逻辑浏览器在解析script时会去下载并执行其中的代码。这些代码在成功加载后就在当前页面的执行环境中运行。如果这也有跨域限制那整个互联网的第三方库生态将无法存在。注意虽然可以跨域加载但你可以通过crossorigin属性来有选择地暴露错误信息。这引出了另一个相关概念。b) 图片、CSS、音视频资源img,link,video机制这些资源的加载是“嵌入”而非“请求数据”。它们被浏览器直接渲染或应用而不需要通过 JavaScript API 去读取其内容。因此同源策略不会阻止它们的加载。举例你可以随意在页面上插入一个来自其他域名的图片img srchttps://cdn.example.com/cat.jpg浏览器会正常加载和显示。3. 如何“主动避免”跨域问题—— CORS 机制对于那些本来会受到同源策略限制的请求如 Web 字体、通过 Fetch 请求 CDN 上的 APICDN 服务商通过配置CORS来主动解决这个问题。CORS 的工作原理当你的网站https://www.my-site.com试图通过Fetch API请求 CDN 上的一个资源https://cdn.example.com/data.json时浏览器会执行以下步骤发送请求浏览器会正常发送请求。浏览器检查因为这是跨域请求浏览器会检查响应头中是否包含一个特定的字段Access-Control-Allow-Origin。CDN 响应配置了 CORS 的 CDN 服务器会在响应头中包含Access-Control-Allow-Origin: https://www.my-site.com或者如果 CDN 想允许任何网站访问它会返回Access-Control-Allow-Origin: *浏览器放行浏览器看到响应头中的Access-Control-Allow-Origin值包含了你的源站域名https://www.my-site.com或通配符*就会认为这次跨域请求是安全的从而将响应数据交给你的前端代码。CDN 服务商做了什么他们在 CDN 服务器的配置中为需要跨域访问的资源如字体、API 接口等设置了正确的Access-Control-Allow-Origin响应头。这就是为什么你可以直接从 CDN 使用 Web 字体而不会遇到跨域问题。总结资源类型使用的 HTML 标签/API为何没有跨域问题关键原因JavaScript 库script src...历史设计使然默认允许跨域浏览器特意放行图片、CSSimg,link属于“嵌入”资源非同源策略限制对象浏览器特意放行Web 字体font-facein CSSCDN 服务器配置了CORS响应头主动授权API 数据Fetch/AJAXCDN 服务器配置了CORS响应头主动授权所以结论是对于默认就允许跨域的标签如script、imgCDN 资源天然无跨域问题。对于默认不允许跨域的请求如字体、FetchCDN 服务商通过正确配置 CORS 响应头主动告诉浏览器“我允许你跨域访问我”从而避免了跨域问题。这使得 CDN 在作为资源托管和分发的角色时能够无缝地与任何站点的前端代码协同工作。 感谢阅读想了解更多 我的博客网站 | 记录思考分享干货 我的个人主页 | 关于我、开源项目