CDN：配置跨域资源共享

什么是跨域资源共享

跨域资源共享CORS（Cross-Origin Resource Sharing）简称跨域访问，是HTML5提供的标准跨域解决方案，允许网页从不同源加载和访问跨域资源，使得跨域数据传输得以安全进行。更多信息可以参考跨域资源共享。

为什么要配置跨域资源共享

由于安全限制，浏览器一般会遵循同源策略（Same-Origin Policy），限制脚本发起的从不同域、子域、协议或端口加载和访问资源的请求，例如example.com无法访问example.org上的资源。通过配置跨域资源共享，可以在CDN服务器端设置相关的响应头，如果访问CDN资源时的请求携带了满足允许规则内的请求头，则返回对应的HTTP响应头部，即可实现跨域资源的加载和访问。

数据交互示意图

未开启跨域共享

1. Client向example.com发出请求，例如：http://example.com/index.html，example.com给client响应了文件index.html，但index.html通过脚本发起了请求：http://example.org/api。

2. Client向example.org发起请求时，携带了Origin：example.com，由于未开启跨域共享，CDN默认不返回跨域头，由于跨域限制，浏览器将拦截此请求的响应，导致报错（页面展示异常，显示"No 'Access-Control-Allow-Origin' header is present on the requested resource"错误）。

开启跨域共享后

1. Client向example.com发出请求，例如：http://example.com/index.html，example.com给client响应了文件index.html，但index.html通过脚本发起了请求：http://example.org/api。

2. Client向example.org发起请求时，携带了Origin：example.com，开启跨域共享后，CDN将会校验用户请求头中Origin的值与配置的Access-Control-Allow-Origin的值是否匹配（支持单个值或多个值的精确匹配及泛域名匹配），校验成功后返回跨域头，如：Access-Control-Allow-Origin:http://example.com。

3. Client收到响应后，检查跨域响应头为http://example.com，满足跨域共享访问策略，即可显示相应结果。

注意事项

• 若使用OSS作为源站，OSS与CDN控制台同时配置CORS，CDN的配置将覆盖OSS的配置。OSS相关的跨域配置，请参见跨域设置。

• 若使用本地服务器或ECS实例作为源站，建议先进行动静分离，静态文件使用CDN加速，CDN控制台配置的CORS功能，仅对静态文件生效。

开启跨域资源共享

1. 登录CDN控制台。

2. 在左侧导航栏，单击域名管理。

3. 在域名管理页面，找到目标域名，单击操作列的管理。

4. 在指定域名的左侧导航栏，单击缓存配置。

5. 单击节点HTTP响应头页签。

6. 单击添加，配置节点HTTP响应头。

7. 请按照以下内容进行选择，设置指定允许的跨域请求的来源，然后单击确定保存配置。

   

   参数	示例
   响应头操作	增加
   自定义响应头参数	Access-Control-Allow-Origin
   响应头值	* 说明 响应头值支持配置为“*”，表示任意来源。 响应头值非“*”的情况下，支持配置单个或多个IP、域名，或者IP和域名混合。相互间使用半角逗号（,）隔开。 响应头值非“*”的情况下，必须包含协议头“http://”或者“https://”。 响应头值支持携带端口。 响应头值支持泛域名。
   是否允许重复	不允许 说明 允许表示允许重复，即源站返回的头会保留，同时会加上一个同名的头。 不允许表示不允许重复，即源站返回的头会被新配置的同名头覆盖。 重要 是否允许重复和跨域验证这两个配置项之间存在互斥，是否允许重复配置为允许的情况下，跨域验证将会失效。
   跨域验证	开启 说明 跨域验证只有在响应头操作为增加，自定义响应头参数为“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。

8. 请设置指定允许的跨域请求方法，然后单击确定保存配置。

   

   参数	示例
   响应头操作	增加
   自定义响应头参数	Access-Control-Allow-Methods
   响应头值	GET、POST、PUT 说明 如果您需要同时添加GET、POST、PUT，请使用半角逗号（,）隔开。
   是否允许重复	不允许 说明 允许表示允许重复，即源站返回的头会保留，同时会加上一个同名的头。 不允许表示不允许重复，即源站返回的头会被新配置的同名头覆盖。 本文以不允许重复为例，现场可根据实际环境而定。

配置示例

常见问题

为什么已经配置了响应头Access-Control-Allow-Origin，但是访问资源仍提示跨域问题，response header中没有配置的响应头？