配置跨域资源共享

更新时间:2024-01-30 07:31:23

当您需要跨域共享或者访问资源时,您可以通过自定义HTTP响应头来实现。本文为您介绍如何实现视频点播资源的跨域共享。

什么是跨域资源共享

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

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

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

数据交互示意图

未开启跨域共享

image

开启跨域共享后

image

开启跨域资源共享

  1. 登录视频点播控制台

  2. 在左侧导航栏选择配置管理 > 分发加速配置 > 域名管理,进入到域名管理页面。

  3. 域名管理页面,单击目标域名对应的配置

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

  5. 单击自定义HTTP响应头页签。

  6. 单击添加,配置自定义HTTP响应头。

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

    域名管理-配置跨域访问1.png

    参数

    示例

    参数

    示例

    响应头操作

    添加

    自定义响应头参数

    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. 请按照以下内容进行选择,设置指定允许的跨域请求方法,然后单击确定保存配置。

    域名管理-配置跨域访问2.png

    参数

    示例

    参数

    示例

    响应头操作

    添加

    自定义响应头参数

    Access-Control-Allow-Methods

    响应头值

    GETPOSTPUT

    说明

    如果您需要同时添加GET、POST、PUT,请使用半角逗号(,)隔开。

    是否允许重复

    不允许

    说明
    • 允许表示允许重复,即源站返回的头会保留,同时会加上一个同名的头。

    • 不允许表示不允许重复,即源站返回的头会被新配置的同名头覆盖。

    本文以不允许重复为例,现场可根据实际环境而定。

配置示例

示例一

如果跨域资源共享的响应头值设置了单个或者多个值(多个值之间用“,”分隔)。

  • 如果用户请求头里携带的“Origin”参数值与被设置的任意一个值精确匹配,就会响应对应的跨域头。

  • 如果都没有精确匹配上,则不响应跨域头。

视频点播控制台上设置:Access-Control-Allow-Origin:http://example.com,https://aliyundoc.com。

  • 如果用户请求携带的Origin头是http://example.com,则CDN节点将会响应Access-Control-Allow-Origin:http://example.com。

  • 如果用户请求携带的Origin头是http://aliyundoc.com,则CDN节点将不会响应Access-Control-Allow-Origin(协议头不匹配,用户请求的是HTTP协议,CDN上设置的是HTTPS协议)。

  • 如果用户请求携带的Origin头是https://aliyundoc.com,则CDN节点将会响应Access-Control-Allow-Origin:https://aliyundoc.com。

  • 如果用户请求携带的Origin头是http://aliyun.com,则CDN节点将不会响应Access-Control-Allow-Origin(域名不匹配)。

示例二

如果跨域资源共享的响应头值设置了泛域名,则会校验请求头中Origin值是否能匹配上Access-Control-Allow-Origin的泛域名。

视频点播控制台上设置: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节点将不会响应Access-Control-Allow-Origin(域名不匹配)。

  • 用户请求:Origin:https://demo.aliyundoc.com,则CDN节点将不会响应Access-Control-Allow-Origin(协议头不匹配,用户请求的是HTTPS协议,CDN上设置的是HTTP协议)。

  • 本页导读 (1)
  • 什么是跨域资源共享
  • 为什么要配置跨域资源共享
  • 数据交互示意图
  • 未开启跨域共享
  • 开启跨域共享后
  • 开启跨域资源共享
  • 配置示例
  • 示例一
  • 示例二