当您的业务接入阿里云CDN后,需要跨域共享或者访问资源时,您可以通过节点HTTP响应头来实现跨域访问。
什么是跨域资源共享
跨域资源共享CORS(Cross-Origin Resource Sharing)简称跨域访问,是HTML5提供的标准跨域解决方案,允许网页从不同源加载和访问跨域资源,从而实现安全的跨域数据传输。更多信息可以参考跨域资源共享。
Q:CDN 默认不开启跨域会有什么效果?
CDN 默认不开启跨域资源共享(CORS)。若未配置,浏览器因同源策略会拦截跨域请求,即不允许其他网站引用该资源。
为什么要配置跨域资源共享
由于安全限制,浏览器通常会遵循同源策略,限制从不同域、子域、协议或端口加载和访问资源的请求。例如,example.com无法访问example.org上的资源。通过配置跨域资源共享,可以在CDN服务器端设置相关的响应头。如果请求携带了满足允许规则的请求头,则返回对应的HTTP响应头部,从而实现跨域资源的加载和访问。
数据交互示意图
未开启跨域共享
开启跨域共享后
注意事项
-
若使用OSS作为源站,CDN控制台配置的CORS将覆盖OSS的配置。OSS相关的跨域配置,请参见跨域设置。
-
若使用本地服务器或ECS实例作为源站,建议动静分离,静态文件使用CDN加速。CDN控制台配置的CORS功能仅对静态文件生效。
开启跨域资源共享
登录CDN控制台。
在左侧导航栏,单击域名管理。
-
在域名列表中选择目标域名,单击操作列的管理。
-
单击缓存配置,选择修改出站响应头页签,设置指定允许的跨域请求的来源和请求方法。
-
设置跨域请求来源
单击添加,按照以下内容设置相关参数,然后单击确定。
参数
说明
示例
响应头操作
需要设置为增加才能使用跨域验证功能。
增加
自定义响应头参数
需要设置为
Access-Control-Allow-Origin才能使用跨域验证功能。Access-Control-Allow-Origin
响应头值
关闭跨域验证:仅支持设置通配符或者单个指定源。
-
通配符
*:使用通配符表示允许任何源访问资源。 -
单个指定源:指定一个具体的源(域名),表示仅允许该特定源访问资源。
开启跨域验证:支持设置通配符、单个指定源、多个指定源、泛域名源。
-
通配符
*:使用通配符表示允许任何源访问资源。 -
单个指定源:指定一个具体的源(域名),表示仅允许该特定源访问资源。
-
多个指定源:配置多个具体的源(域名),相互间使用半角逗号
,隔开,表示允许该范围内的源访问资源。 -
泛域名源:可以配置一个泛域名,表示允许与该泛域名匹配的所有源访问资源。
-
* -
http://www.aliyun.com -
https://aliyun.com,http://www.aliyun.com -
http://*.aliyun.com
是否允许重复
-
允许:即源站返回的头会保留,同时会加上一个同名的头。
-
不允许:即源站返回的头会被新配置的同名头覆盖。
重要是否允许重复和跨域验证这两个配置项之间存在互斥,是否允许重复配置为允许的情况下,跨域验证将会失效。
不允许
跨域验证
-
跨域验证只有在响应头操作为增加,自定义响应头参数为“Access-Control-Allow-Origin”的时候才可以配置。
-
跨域验证取值为关闭和开启,默认为关闭状态。
-
关闭状态下CDN节点不会校验用户请求中携带的Origin头,只会固定响应已配置的“Access-Control-Allow-Origin”值。
-
开启状态下CDN节点将按以下规则对用户做跨域校验,并根据校验结果响应“Access-Control-Allow-Origin”的值。跨域校验规则:
-
任意匹配:自定义响应头参数“Access-Control-Allow-Origin”的值设置为“*”时,不论用户请求里面是否携带“Origin”参数,也不论携带的“Origin”参数为何值,都固定返回“Access-Control-Allow-Origin:*”。
-
精确匹配:自定义响应头参数“Access-Control-Allow-Origin”的值设置了单个或者多个值(多个值之间用半角逗号“,”分隔)。
-
如果用户请求头里携带的“Origin”参数值与被设置的任意一个值精确匹配,就会响应对应的跨域头。
-
如果都没有精确匹配上,则不响应跨域头。
-
-
泛域名匹配:自定义响应头参数“Access-Control-Allow-Origin”的值设置了泛域名,则会校验请求头中Origin值是否能匹配上“Access-Control-Allow-Origin”的泛域名。
-
-
开启状态下,如果响应头值中的域名包含短划线
-,需要对短划线做转义处理后再配置,将-转义为%-。例如:-
原始响应头值:
http://doc.aliyun-example.com。 -
转义后的响应头值:
http://doc.aliyun%-example.com。
-
-
开启
-
-
设置跨域请求方法
单击添加,按照以下内容设置相关参数,然后单击确定。
参数
说明
示例
响应头操作
需要设置为增加
增加
自定义响应头参数
需要设置为
Access-Control-Allow-MethodsAccess-Control-Allow-Methods
响应头值
支持
GET、POST、PUT这些请求方法。如果您需要同时添加GET、POST、PUT,请使用半角逗号,隔开。GET是否允许重复
-
允许:即源站返回的头会保留,同时会加上一个同名的头。
-
不允许:即源站返回的头会被新配置的同名头覆盖。
不允许
-
-
Q:新增跨域返回头后,历史已缓存的静态资源是否支持跨域?
新增的跨域响应头对历史已缓存的资源不会自动生效,因为 CDN 缓存的是完整的 HTTP 响应。若要使新配置的 Access-Control-Allow-Origin 生效,需主动刷新对应资源的 CDN 缓存。否则用户仍会收到旧缓存中不含该头的响应。
配置示例
示例一
如果跨域资源共享的响应头值设置了单个或者多个值(多个值之间用“,”分隔):
-
用户请求头中的“Origin”参数值与任意一个设置值精确匹配时,CDN节点响应对应的跨域头。
-
如果都没有精确匹配上,则不响应跨域头。
在CDN上设置:Access-Control-Allow-Origin:http://example.com,https://aliyundoc.com。
-
用户请求携带的Origin头是
http://example.com,CDN节点响应Access-Control-Allow-Origin:http://example.com。 -
用户请求携带的Origin头是
https://aliyundoc.com,CDN节点响应Access-Control-Allow-Origin:https://aliyundoc.com。 -
用户请求携带的Origin头是
http://aliyundoc.com,CDN节点将不会响应(协议头不匹配,用户请求的是HTTP协议,CDN上设置的是HTTPS协议)。 -
用户请求携带的Origin头是
http://aliyun.com,CDN节点将不会响应(域名不匹配)。
示例二
如果跨域资源共享的响应头值设置了泛域名,则会校验请求头中Origin值是否能匹配上Access-Control-Allow-Origin的泛域名。
在CDN上设置:Access-Control-Allow-Origin:http://*.aliyundoc.com。
-
用户请求携带的Origin头是
http://demo.aliyundoc.com,CDN节点响应Access-Control-Allow-Origin:http://demo.aliyundoc.com。 -
用户请求携带的Origin头是
http://demo.example.com,CDN节点不会响应(域名不匹配)。 -
用户请求携带的Origin头是
https://demo.aliyundoc.com,CDN节点不会响应(协议头不匹配,用户请求的是HTTPS协议,CDN上设置的是HTTP协议)。
Q:如何使用 curl 验证 CDN 响应头中的 Access-Control-Allow-Origin 是否生效?
使用 curl -svo /dev/null 发送带 Origin 请求头的 GET 请求,通过详细输出检查响应头。若响应头中存在 Access-Control-Allow-Origin 字段且值符合预期(如 * 或指定域名),则说明 CDN 跨域配置已生效;若缺失,需检查 CDN 控制台自定义响应头配置或源站设置。
curl -svo /dev/null https://img.anleme.cc/agent/dl1.jpg -H 'origin:https://am.anleme.cc'
常见问题
为什么配置了Access-Control-Allow-Origin响应头,但访问资源仍提示跨域问题,且response header中没有该响应头?
Q:CDN 跨域配置是否支持用逗号分隔多个泛域名?
不支持。CDN 开启跨域验证后,仅支持配置单个泛域名,或者将多个精确域名(非泛域名)用逗号分隔。不支持直接用逗号分隔多个泛域名(如 https://*.iflyvoice.cn,https://*.xxx.com)。
Q:为什么 CDN 加速域名下访问字体文件触发 CORS 问题,而视频文件不触发?
这取决于资源类型和浏览器的安全策略。视频文件(如 MP4、WebM)在通过 video 标签加载时,默认不受 CORS 限制,除非显式添加了 crossorigin 属性;而字体文件(如 .ttf、.woff)无论何种方式加载,浏览器一律强制校验 CORS 响应头。因此,即使视频和字体都托管在同一域名下,访问视频通常不会报 CORS 错误,但字体文件会,这是由浏览器规范决定的。
Q:如何验证 CDN 跨域配置是否生效?
可以通过以下方式验证:
-
重新测试访问,观察是否还触发跨域报错。
-
使用 curl -svo /dev/null 命令指定 Origin 头发送 GET 请求,通过详细输出检查响应头,例如:
curl -svo /dev/null https://img.anleme.cc/agent/dl1.jpg -H 'origin:https://am.anleme.cc' -
提供测试域名由技术支持人员协助测试。
Q:CDN 加速 OSS 时,如何透传源站 OSS 的跨域 CORS 配置?
若希望透传源站 OSS 的跨域 CORS 配置,需确保首次访问请求携带 Origin 头,使 CDN 回源获取并缓存 OSS 返回的 Access-Control-Allow-Origin 响应头。但鉴于缓存机制可能导致后续不带 Origin 头的请求或不同 Origin 请求出现跨域问题,官方推荐的最佳实践是直接在 CDN 控制台的缓存配置中通过「修改出站响应头」功能添加 CORS 相关响应头,而非依赖透传。
Q:多个 CDN 域名关联同一 OSS 时,能否仅在 OSS 配置一次跨域规则使 CDN 自动继承?
不支持。由于 CDN 节点会缓存响应头,且缓存行为受首次请求是否携带 Origin 头影响,直接透传 OSS 配置存在跨域报错风险。因此,必须在每个 CDN 域名的控制台单独配置跨域规则(建议通过修改出站响应头),以确保跨域访问的稳定性和正确性。