Configure cross-origin resource sharing

What is cross-origin resource sharing

Cross-origin resource sharing (CORS) is a standard HTML5 mechanism that allows a web page to load and access resources from a different origin, enabling secure cross-origin data transfers. It is also known as cross-origin access. For more information, see cross-origin resource sharing.

Why configure cross-origin sharing

For security reasons, web browsers enforce a same-origin policy, which restricts requests to load resources from a different domain, subdomain, protocol, or port. For example, a page from example.com cannot access a resource on example.org. By configuring cross-origin resource sharing, you can set the necessary response headers on CDN and servers. If a request includes headers that match the allowed rules, the server returns the corresponding HTTP response headers. This allows the browser to load and access the cross-origin resource.

How it works

Standard browser behavior

CORS with a CDN

Enable cross-origin resource sharing

1. Log in 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 pane 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. Set the parameters for allowed origins and click OK.

   Parameter	Example
   Operation	Add
   Response Header	Access-Control-Allow-Origin
   Header Value	* Note The value can be set to an asterisk (*) to allow requests from any origin. If the value is not an asterisk (*), you can specify one or more IP addresses, domain names, or a mix of both. Use commas to separate multiple values. If the header value is not *, it must start with http:// or https://. You can include a port number in the header value. Wildcard domain names are supported.
   Allow Duplicates	No Note Yes: Allows duplicate headers. The CDN POP retains the header from the origin server and adds a new header with the same name. No: Prevents duplicate headers. The CDN POP overwrites the header from the origin server with the new header. This topic uses an example in which duplicates are not allowed. The actual configuration may vary depending on your environment. Important The Allow Duplicates and CORS settings are mutually exclusive. If Allow Duplicates is set to Yes, the CORS validation is disabled.
   CORS	Enable Note You can configure CORS only when the Operation is set to Add and the Response Header is "Access-Control-Allow-Origin". CORS can be set to Disable or Enable. The default value is Disable. In the Off state, the CDN node does not validate the Origin header in a user's request and only responds with the configured "Access-Control-Allow-Origin" value. When Enabled, CDN nodes will perform cross-origin validation on user requests according to the following rules and respond with the "Access-Control-Allow-Origin" value based on the validation result. Cross-origin validation rules: Wildcard Match: When the value of the Response Header Access-Control-Allow-Origin is set to "*", the Access-Control-Allow-Origin:* header is always returned, regardless of whether the user request includes an Origin parameter or what the value of that parameter is. Exact match: Header Value is set to one or more specific origins, separated by commas (,). If the value of the "Origin" header in a request exactly matches any of the configured values, the response will include the corresponding cross-origin header. If there is no exact match, the CORS header is not included in the response. Wildcard domain name matching: If the value of the custom response header "Access-Control-Allow-Origin" is set to a wildcard domain name, the system verifies whether the Origin value in the request header matches the wildcard domain name. When enabled, if the domain name in the Header Value contains a hyphen -, you must escape the hyphen before you configure the value. Escape - as %-. For example: Original Header Value: http://doc.aliyun-example.com. Escaped Header Value: http://doc.aliyun%-example.com.

8. Set the parameters for allowed methods and click OK.

   Parameter	Example
   Operation	Add
   Response Header	Access-Control-Allow-Methods
   Header Value	GET, POST, PUT Note Use commas to separate multiple methods.
   Allow Duplicates	No Note Yes: Allows duplicate headers. The CDN POP retains the header from the origin server and adds a new header with the same name. No: Prevents duplicate headers. The CDN POP overwrites the header from the origin server with the new header. This topic uses an example where duplicates are not allowed. The actual implementation may vary depending on your environment.

Configuration examples

Example 1

If the response header value for cross-origin resource sharing is set to a single value or multiple values (multiple values are separated by commas).

• If the value of the "Origin" parameter in the request header exactly matches any of the configured values, the server responds with the corresponding cross-origin header.

• If there is no exact match, the CORS header is not included in the response.

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

• The user request contains the Origin header http://example.com, and the CDN node responds with Access-Control-Allow-Origin: http://example.com.

• The request includes the Origin header https://aliyundoc.com, and the CDN node responds with Access-Control-Allow-Origin: https://aliyundoc.com.

• If the Origin header in a user request is http://aliyundoc.com, the CDN node will not respond because the protocol in the header does not match: the user request uses the HTTP protocol, but the CDN is configured for the HTTPS protocol.

• The CDN node will not respond to a user request with the Origin header http://aliyun.com (domain name mismatch).

Example 2

If the Access-Control-Allow-Origin response header is set to a wildcard domain name, the Origin value in the request header is checked to verify that it matches the wildcard domain name.

In the ApsaraVideo VOD console, set Access-Control-Allow-Origin to http://*.aliyundoc.com.

• The Origin header in the request is http://demo.aliyundoc.com, and the CDN node responds with Access-Control-Allow-Origin: http://demo.aliyundoc.com.

• If the Origin header of a request is http://demo.example.com, the CDN node will not respond (domain mismatch).

• If the Origin header of a user request is https://demo.aliyundoc.com, the CDN node will not respond. This is because the protocol does not match. The user request uses the HTTPS protocol, but the HTTP protocol is configured on the CDN.