ApsaraVideo VOD:Configure cross-origin resource sharing

What is cross-origin resource sharing

Cross-origin resource sharing (CORS) is a standard HTML5 solution that allows web pages to load and access resources from different origins. This enables secure cross-origin data transmission. For more information, see Cross-Origin Resource Sharing.

Why configure cross-origin resource sharing

For security reasons, browsers follow the same-origin policy. This policy restricts requests from loading and accessing resources from different domains, subdomains, protocols, or ports. For example, example.com cannot access resources on example.org. By configuring CORS, you can set response headers on the CDN server. If a request includes a request header that matches the allowed rules, the server returns the corresponding HTTP response header. This allows cross-origin resources to be loaded and accessed.

Data Interaction Diagram

CORS disabled

CORS enabled

Enable cross-origin resource sharing

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 navigation pane on the left for the domain name, click Cache.

5. Click the Custom HTTP Response Header tab.

6. Click Add to configure a custom HTTP response header.

7. Configure the parameters as described in the following table to specify the allowed origins for cross-origin requests. Then, click OK to save the configuration.

   

   Parameter	Example
   Operation	Add
   Response Header	Access-Control-Allow-Origin
   Header Value	* Note You can set the response header value to `*` to indicate any origin. If the response header value is not `*`, you can specify one or more IP addresses, domain names, or a mix of both. Separate them with commas (,). If the response header value is not `*`, it must include the protocol `http://` or `https://`. The response header value can include a port number. The response header value supports wildcard domain names.
   Allow Duplicates	No Note Yes: Allows duplicates. The header from the origin server is retained, and another header with the same name is added. No: Disallows duplicates. The header from the origin server is overwritten by the new header with the same name. This topic provides an example of duplicate prevention. The specific configuration depends on your actual environment. Important The Allow Duplicates and CORS Validation settings are mutually exclusive. If you set Allow Duplicates to Yes, CORS validation becomes invalid.
   CORS	Enabled Note You can configure CORS Validation only when Response Header Operation is set to Add and Custom Response Header Parameter is set to `Access-Control-Allow-Origin`. CORS Validation can be set to Disabled or Enabled. The default value is Disabled. Disabled: The CDN POP does not validate the Origin header in the user request. It only returns the configured `Access-Control-Allow-Origin` value. Enabled: The CDN POP validates the cross-origin request based on the following rules and returns the `Access-Control-Allow-Origin` value based on the validation result. The validation rules are as follows: Wildcard match: If the value of the Custom Response Header Parameter `Access-Control-Allow-Origin` is set to `*`, the POP always returns `Access-Control-Allow-Origin:*`, regardless of whether the user request contains an `Origin` parameter or what its value is. Exact match: The value of the Custom Response Header Parameter `Access-Control-Allow-Origin` is set to one or more values separated by commas (,). If the value of the `Origin` parameter in the user request exactly matches any of the configured values, the corresponding cross-domain header is returned. If no exact match is found, no cross-domain header is returned. Wildcard domain match: If the value of the Custom Response Header Parameter `Access-Control-Allow-Origin` is set to a wildcard domain name, the POP checks whether the `Origin` value in the request header matches the wildcard domain name. When CORS Validation is Enabled, if the domain name in the Response Header Value contains a hyphen (-), you must escape the hyphen before you configure it. Escape the hyphen (-) as %-. For example: Original response header value: http://doc.aliyun-example.com. Escaped response header value: http://doc.aliyun%-example.com.

8. Configure the parameters as described in the following table to specify the allowed cross-origin request methods. Then, click OK to save the configuration.

   

   Parameter	Example
   Operation	Add
   Response Header	Access-Control-Allow-Methods
   Header Value	GET, POST, PUT Note To add GET, POST, and PUT at the same time, separate them with commas (,).
   Allow Duplicates	No Note Allow: Retains the header from the origin server and adds a new header with the same name. No: Disallows duplicates. The header from the origin server is overwritten by the new header with the same name. This topic provides an example of how to prevent duplicates. The actual configuration depends on your specific environment.

Configuration examples

Example 1

You can set the CORS response header to one or more values separated by commas (,).

• If the value of the `Origin` header in the request is an exact match for any of the configured values, the corresponding cross-domain header is returned.

• If no exact match is found, no cross-domain header is returned.

For example, in the ApsaraVideo VOD console, you set Access-Control-Allow-Origin to `http://example.com,https://aliyundoc.com`.

• If a user request includes the Origin: http://example.com header, the CDN POP returns Access-Control-Allow-Origin: http://example.com.

• If a user request includes the Origin: https://aliyundoc.com header, the CDN POP returns Access-Control-Allow-Origin: https://aliyundoc.com.

• If a user request includes the Origin: http://aliyundoc.com header, the CDN POP does not return the `Access-Control-Allow-Origin` header. This is because the protocols do not match. The user request uses HTTP, but the configuration on CDN is for HTTPS.

• If a user request includes the Origin: http://aliyun.com header, the CDN POP does not return the `Access-Control-Allow-Origin` header. This is because the domains do not match.

Example 2

If you set the CORS response header to a wildcard domain name, the system checks whether the Origin value in the request header matches the wildcard domain name specified for Access-Control-Allow-Origin.

For example, in the ApsaraVideo VOD console, you set Access-Control-Allow-Origin to `http://*.aliyundoc.com`.

• If a user request includes the Origin: http://demo.aliyundoc.com header, the CDN POP returns Access-Control-Allow-Origin: http://demo.aliyundoc.com.

• If a user request includes the Origin: http://demo.example.com header, the CDN POP does not return the `Access-Control-Allow-Origin` header. This is because the domains do not match.

• If a user request includes the Origin: https://demo.aliyundoc.com header, the CDN POP does not return the `Access-Control-Allow-Origin` header. This is because the protocols do not match. The user request uses HTTPS, but the configuration on CDN is for HTTP.