All Products
Search
Document Center

ApsaraVideo VOD:Configure CORS

Last Updated:Mar 06, 2024

ApsaraVideo VOD supports cross-origin resource sharing (CORS). You can add custom HTTP response headers to enable CORS. This topic describes how to configure CORS in ApsaraVideo VOD.

What is CORS?

Cross-origin resource sharing (CORS) is a standard cross-origin solution that is provided by HTML5 to allow web pages to access and load resources from different origin servers. This ensures the security of data transmission. For more information, see Cross-Origin Resource Sharing (CORS).

Benefits

For security purposes, browsers use the same-origin policy. This restricts web pages from initiating requests to access and load resources from different domains or subdomains, or over different protocols or ports. For example, example.com cannot access resources on example.org. When you configure CORS, you can specify response headers that points of presence (POPs) return to clients. This way, if a request carries a header that is included in the allowed headers, the requested resources can be accessed and loaded even from a different origin.

How CORS works

CORS not enabled

image

CORS enabled

image

Enable CORS

  1. Log on to the ApsaraVideo VOD console.

  2. In the left-side navigation pane, choose Configuration Management > CDN Configuration > Domain Names.

  3. On the Domain Names page, find the domain name that you want to manage and click Configure.

  4. In the left-side navigation tree, click Cache.

  5. Click the Custom HTTP Response Headers tab.

  6. Click Add. In the dialog box that appears, specify the parameters.

  7. Set Operation to Add, Response Header to Access-Control-Allow-Origin, and Allow Duplicates to Not Allowed. Then, enable CORS and click OK. The following figure shows the sample configuration.

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

    Parameter

    Example

    Operation

    Add

    Response Header

    Access-Control-Allow-Origin

    Header Value

    *

    Note
    • You can set this header to an asterisk (*), which matches all origins.

    • You can configure one or more IP addresses, domain names, or combinations of IP addresses and domain names. Separate multiple values with commas (,).

    • If you do not use an asterisk (*) as a wildcard character for this header, the value must start with http:// or https://.

    • Port numbers are supported.

    • Wildcard domain names are supported.

    Allow Duplicates

    No

    Note
    • Yes: Duplicate headers are allowed. The header that is returned from the origin server and the header that is added to the response are returned to the client.

    • No: Duplicate headers are not allowed. The header that is returned from the origin server is overwritten by the header that is added to the response.

    In this example, the value Not Allowed is used. You can configure this parameter based on your business requirements.

    Important

    The Allow Duplicates and CORS settings are mutually exclusive. If you set Allow Duplicates to Yes, the setting of Yes becomes invalid.

    CORS

    Enable

    Note
    • You can configure the CORS parameter only if you set Operation to Add and Response Header to Access-Control-Allow-Origin.

    • Valid values of CORS: Disable and Enable. Default value: Disable.

      • Disable: POPs do not check the Origin header in user requests. In this case, POPs return the configured value of Access-Control-Allow-Origin.

      • Enable: POPs check the Origin header in user requests and specify a value for the Access-Control-Allow-Origin header based on the following rules:

        • Wildcard pattern match: If you set the Access-Control-Allow-Origin header to an asterisk (*), Access-Control-Allow-Origin:* is returned regardless of whether user requests contain the Origin header or the value that is specified for the Origin header.

        • Exact match: You can specify one or more values for the Access-Control-Allow-Origin header. Separate multiple values with commas (,).

          • If the value of the Origin header in a user request matches a value of the Access-Control-Allow-Origin header, the matched value of the Access-Control-Allow-Origin header is returned.

          • If the value of the Origin header in a user request does not match a value of the Access-Control-Allow-Origin header, the Access-Control-Allow-Origin header is not returned.

        • Wildcard domain name match: If you set the Access-Control-Allow-Origin header to a wildcard domain name, the value of the Origin header is matched against the wildcard domain name.

      • If you set the CORS parameter to Enable and the value that you want to specify for the Header Value parameter contains a hyphen (-), you need to escape the hyphen (-) to %-. Example:

        • Original response header value: http://doc.aliyun-example.com.

        • Escaped response header value: http://doc.aliyun%-example.com.

  8. Set Operation to Add, Response Header to Access-Control-Allow-Methods, and Allow Duplicates to Not Allowed. Then, click OK. The following figure shows the sample configuration.

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

    Parameter

    Example

    Operation

    Add

    Response Header

    Access-Control-Allow-Methods

    Header Value

    GET, POST, or PUT

    Note

    If you want to specify GET, POST, and PUT at the same time, separate the values with commas (,).

    Allow Duplicates

    No

    Note
    • Yes: Duplicate headers are allowed. The header that is returned from the origin server and the header that is added to the response are returned to the client.

    • No: Duplicate headers are not allowed. The header that is returned from the origin server is overwritten by the header that is added to the response.

    In this example, the value Not Allowed is used. You can configure this parameter based on your business requirements.

Examples

Example 1

If you set the Access-Control-Allow-Origin header to one or more values that are separated by commas (,):

  • If the value of the Origin header in a user request matches a value of the Access-Control-Allow-Origin header, the matched value of the Access-Control-Allow-Origin header is returned.

  • If the value of the Origin header in a user request does not match a value of the Access-Control-Allow-Origin header, the Access-Control-Allow-Origin header is not returned.

Specify Access-Control-Allow-Origin:http://example.com,https://aliyundoc.com in the ApsaraVideo VOD console.

  • If the value of the Origin header in a user request is http://example.com, POPs return Access-Control-Allow-Origin:http://example.com.

  • If the value of the Origin header in a user request is http://aliyundoc.com, POPs do not return Access-Control-Allow-Origin because the request uses HTTP and POPs respond to HTTPS requests in this case.

  • If the value of the Origin header in a user request is https://aliyundoc.com, POPs return Access-Control-Allow-Origin:https://aliyundoc.com.

  • If the value of the Origin header in a user request is http://aliyun.com, POPs do not return Access-Control-Allow-Origin because the domain names do not match.

Example 2

If you set the Access-Control-Allow-Origin header to a wildcard domain name, CDN POPs check whether the value of the Origin header in a user request matches the wildcard domain name.

Specify Access-Control-Allow-Origin:http://*.aliyundoc.com in the ApsaraVideo VOD console.

  • If the value of the Origin header in a user request is http://demo.aliyundoc.com, POPs return Access-Control-Allow-Origin:http://demo.aliyundoc.com.

  • If the value of the Origin header in a user request is http://demo.example.com, POPs do not return Access-Control-Allow-Origin because the domain names do not match.

  • If the value of the Origin header in a user request is https://demo.aliyundoc.com, POPs do not return Access-Control-Allow-Origin because the request uses HTTPS and POPs respond only to HTTP requests in this case.